Headers

Use these responsive header navigation components for your website.

header-01

Pill shaped header that expands to display its navigation links with an animated effect.

Preview

Code

Titanium

This component also accepts all the props from Mantine's Container component.

Name	Type	Default value	Description
breakpoint	MantineBreakpoint	`xs`	Breakpoint at which the Burger menu is displayed.
callToActionTitle	string	`Join Now`	Title for the call to action button.
callToActionUrl	string		URL for the call to action button.
isMenuOpen	boolean		Determines whether the menu is open.
links	HeaderLink[]		Navigation links.
logo	React.ReactNode		Logo to display on the very left side.
onMenuToggle	() => void		Callback for when the Burger button is toggled. When breakpoint is reached, the menu is displayed.
radius	MantineRadius \| number	`30`	Border radius of the header.