Navbar

A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse menu and more.

Installation

The above command is for individual installation only. You may skip this step if @heroui/react is already installed globally.

HeroUI exports 7 navbar-related components:

You can use the position prop to make the navbar static positioned (the default behavior is sticky).

It is possible to hide the navbar on scroll by using the shouldHideOnScroll prop.

You can use the NavbarMenuToggle and NavbarMenu components to display a togglable menu.

If you want to remove the open / close animation, you can pass the disableAnimation={true} prop to Navbar component.

You can use the isMenuOpen and onMenuOpenChange props to control the navbar menu state.

You can use the isBordered prop to add a bottom border to the navbar.

Navbar has a blur effect by default. You can disable it by using the isBlurred=false prop.

It is possible to use the Dropdown component to display a dropdown menu as navbar item.

Example of a navbar with avatar and dropdown menu.

Example of a navbar with search input.

When the NavbarItem is active, it will have a data-active attribute. You can use this attribute to customize it.

base: The main slot for the navbar. It takes the full width of the parent and wraps the navbar elements including the menu.
wrapper: The slot that contains the navbar elements such as brand, content and toggle.
brand: The slot for the NavbarBrand component.
content: The slot for the NavbarContent component.
item: The slot for the NavbarItem component.
toggle: The slot for the NavbarMenuToggle component.
toggleIcon: The slot for the NavbarMenuToggle icon.
menu: The slot for the NavbarMenu component.
menuItem: The slot for the NavbarMenuItem component.

Navbar has the following attributes on the base element:

data-menu-open: Indicates if the navbar menu is open.
data-hidden: Indicates if the navbar is hidden. It is used when the shouldHideOnScroll prop is true.

NavbarContent

data-justify: The justify content of the navbar content. It takes into account the correct space distribution.

NavbarItem has the following attributes on the base element:

data-active: Indicates if the navbar item is active. It is used when the isActive prop is true.

NavbarMenuToggle has the following attributes on the base element:

data-open: Indicates if the navbar menu is open. It is used when the isMenuOpen prop is true.
data-pressed: When the navbar menu toggle is pressed. Based on usePress
data-hover: When the navbar menu toggle is being hovered. Based on useHover
data-focus-visible: When the navbar menu toggle is being focused with the keyboard. Based on useFocusRing.

NavbarMenuItem has the following attributes on the base element:

data-active: Indicates if the menu item is active. It is used when the isActive prop is true.

Prop	Type	Default
`children*`	`ReactNode[]`
`height`	`string \| number`	`"4rem (64px)"`
`position`	`static \| sticky`	`"sticky"`
`maxWidth`	`sm \| md \| lg \| xl \| 2xl \| full`	`"lg"`
`parentRef`	`React.RefObject<HTMLElement>`	`"window"`
`isBordered`	`boolean`	`false`
`isBlurred`	`boolean`	`true`
`isMenuOpen`	`boolean`	`false`
`isMenuDefaultOpen`	`boolean`	`false`
`shouldHideOnScroll`	`boolean`	`false`
`motionProps`	`MotionProps`
`disableScrollHandler`	`boolean`	`false`
`disableAnimation`	`boolean`	`false`
`classNames`	`Partial<Record<'base' \| 'wrapper' \| 'brand' \| 'content' \| 'item' \| 'toggle' \| 'toggleIcon' \| 'menu' \| 'menuItem', string>>`

Prop	Type	Default
`icon`	`ReactNode \| ((isOpen: boolean \| undefined) => ReactNode)`
`isSelected`	`boolean`	`false`
`defaultSelected`	`boolean`	`false`
`srOnlyText`	`string`	`"open/close navigation menu"`