Navbar

Horizontal navigation bar with brand, nav links, and actions. Supports icons, badges, search, colour variants, and a built-in mobile menu pattern.

Anatomy

<Navbar>
  <NavbarBrand />
  <NavbarContent align="start">
    <NavbarLink href="…" active icon={…} badge="3" />
    <NavbarDivider />
    <NavbarLink href="…" />
  </NavbarContent>
  <NavbarActions>
    <NavbarSearch />
    <NavbarMenuButton open={open} onClick={toggle} />  {/* mobile only */}
  </NavbarActions>
</Navbar>
<NavbarMobileMenu open={open}>                         {/* mobile panel */}
  <NavbarMobileLink href="…" active icon={…} />
</NavbarMobileMenu>

Examples

DAVE

With icons and badges

DAVE

With search

DAVE

With divider

DAVE

Center logo

DAVE

Color variants

DAVE

default

DAVE

subtle

DAVE

primary

Props

Navbar

sticky= true

boolean

Sticks the navbar to the top of the viewport on scroll.

bordered= true

boolean

Shows a bottom border.

color= 'default'

'default' | 'subtle' | 'primary' | 'inverse'

Background colour variant.

maxWidth= 'max-w-screen-xl'

string

Tailwind max-width class for the inner container.

children

ReactNode

NavbarBrand, NavbarContent, NavbarActions.

className

string

Additional classes on the header element.

Prop	Type	Default	Description
sticky	boolean	true	Sticks the navbar to the top of the viewport on scroll.
bordered	boolean	true	Shows a bottom border.
color	'default' \| 'subtle' \| 'primary' \| 'inverse'	'default'	Background colour variant.
maxWidth	string	'max-w-screen-xl'	Tailwind max-width class for the inner container.
children	ReactNode	—	NavbarBrand, NavbarContent, NavbarActions.
className	string	—	Additional classes on the header element.

NavbarContent

align= 'start'

'start' | 'center' | 'end'

Aligns the nav links within the available space.

children*

ReactNode

NavbarLink elements.

className

string

Additional classes.

Prop	Type	Default	Description
align	'start' \| 'center' \| 'end'	'start'	Aligns the nav links within the available space.
children*	ReactNode	—	NavbarLink elements.
className	string	—	Additional classes.

NavbarLink / NavbarMobileLink

active= false

boolean

Marks this link as the current page (aria-current="page").

icon

ReactNode

Icon rendered before the label.

badge

ReactNode

Badge rendered after the label — use a number or short string.

as= 'a'

React.ElementType

Swap the rendered element — pass a router Link component for client-side navigation.

href

string

Link destination.

children*

ReactNode

Link label.

Prop	Type	Default	Description
active	boolean	false	Marks this link as the current page (aria-current="page").
icon	ReactNode	—	Icon rendered before the label.
badge	ReactNode	—	Badge rendered after the label — use a number or short string.
as	React.ElementType	'a'	Swap the rendered element — pass a router Link component for client-side navigation.
href	string	—	Link destination.
children*	ReactNode	—	Link label.

NavbarSearch

placeholder= 'Search…'

string

Input placeholder.

value

string

Controlled value.

defaultValue

string

Initial value for uncontrolled usage.

onValueChange

(value: string) => void

Called on every keystroke.

className

string

Additional classes on the wrapper.

Prop	Type	Default	Description
placeholder	string	'Search…'	Input placeholder.
value	string	—	Controlled value.
defaultValue	string	—	Initial value for uncontrolled usage.
onValueChange	(value: string) => void	—	Called on every keystroke.
className	string	—	Additional classes on the wrapper.

NavbarMenuButton

open= false

boolean

Controls the icon — hamburger when false, X when true.

onClick

() => void

Toggle handler.

className

string

Additional classes.

Prop	Type	Default	Description
open	boolean	false	Controls the icon — hamburger when false, X when true.
onClick	() => void	—	Toggle handler.
className	string	—	Additional classes.

NavbarMobileMenu

open= false

boolean

Shows or hides the mobile menu panel.

children*

ReactNode

NavbarMobileLink elements.

className

string

Additional classes.

Prop	Type	Default	Description
open	boolean	false	Shows or hides the mobile menu panel.
children*	ReactNode	—	NavbarMobileLink elements.
className	string	—	Additional classes.

PreviousNav NextPagination