Navbar

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

Storybook @nextui-org/navbar Source Styles source

Installation

npx nextui-cli@latest add navbar

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

Import

NextUI exports 7 navbar-related components:

Navbar: The main component of navbar.
NavbarBrand: The component for branding.
NavbarContent: The component for wrapping navbar items.
NavbarItem: The component for navbar item.
NavbarMenuToggle: The component for toggling navbar menu.
NavbarMenu: The component for wrapping navbar menu items.
NavbarMenuItem: The component for navbar menu item.

Usage

Static

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

Hide on scroll

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.

With Border

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

Disabling Blur

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.

With Avatar

Example of a navbar with avatar and dropdown menu.

With Search Input

Example of a navbar with search input.

Customizing the active item

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

Slots

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.

Data Attributes

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.

API

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`	`Record<'base' \| 'wrapper' \| 'brand' \| 'content' \| 'item' \| 'toggle' \| 'toggleIcon' \| 'menu' \| 'menuItem', string>`

Prop	Type	Default
`onMenuOpenChange`	`(isOpen: boolean) => void`
`onScrollPositionChange`	`(position: number) => void`

NavbarContent Props

Prop	Type	Default
`children*`	`ReactNode[]`
`justify`	`start \| center \| end`	`"start"`

NavbarItem Props

Prop	Type	Default
`children`	`ReactNode`
`isActive`	`boolean`	`false`

NavbarMenuToggle Props

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

NavbarMenuToggle Events

Prop	Type	Default
`onChange`	`(isOpen: boolean) => void`

NavbarMenu Props

Prop	Type	Default
`children*`	`ReactNode[]`
`portalContainer`	`HTMLElement`	`"document.body"`
`motionProps`	`MotionProps`

NavbarMenuItem Props

Prop	Type	Default
`children`	`ReactNode`
`isActive`	`boolean`	`false`

Types

export type MotionProps = HTMLMotionProps<"div">; // @see https://www.framer.com/motion/