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

nextui add navbar

No need to install this package 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

Attribute	Type	Description	Default
children*	`ReactNode[]`	The children to render. Usually navbar elements such as `NavbarBrand`, `NavbarContent` and `NavbarItem`	-
height	`string` \| `number`	The height of the navbar.	`4rem` (64px)
position	`static` \| `sticky`	The position of the navbar.	`sticky`
maxWidth	`sm` \| `md` \| `lg` \| `xl` \| `2xl` \| `full`	The max width of the navbar wrapper.	`lg`
parentRef	`React.RefObject<HTMLElement>`	The parent element where the navbar is placed within. This is used to determine the scroll position and whether the navbar should be hidden or not.	`window`
isBordered	`boolean`	Whether the navbar should have a bottom border or not.	`false`
isBlurred	`boolean`	Whether the navbar should have a blur effect or not.	`true`
isMenuOpen	`boolean`	Indicates if the navbar menu is open. (controlled)	`false`
isMenuDefaultOpen	`boolean`	Indicates if the navbar menu is open by default. (uncontrolled)	`false`
shouldHideOnScroll	`boolean`	Indicates if the navbar should hide on scroll.	`false`
motionProps	MotionProps	The motion props to control the `visible` / `hidden` animation. This motion is only available if the `shouldHideOnScroll` prop is set to `true`.	-
disableScrollHandler	`boolean`	Whether the navbar parent scroll event should be listened to or not.	`false`
disableAnimation	`boolean`	Whether the navbar menu animation should be disabled or not.	`false`
classNames	`Record<"base"｜ "wrapper"｜ "brand"｜ "content"｜ "item"｜ "toggle"｜ "toggleIcon"｜ "menu"｜ "menuItem", string>`	Allows to set custom class names for the navbar slots.	-

Attribute	Type	Description
onMenuOpenChange	`(isOpen: boolean) => void`	Handler that is called when the navbar menu open state changes.
onScrollPositionChange	`(position: number) => void`	Handler that is called when the navbar parent element is scrolled. This event is only dispatched if `disableScrollHandler` is set to `false` or `shouldHideOnScroll` is set to `true`.

NavbarContent Props

Attribute	Type	Description	Default
children*	`ReactNode[]`	The children to render. Usually navbar elements such as `NavbarBrand`, `NavbarContent` and `NavbarItem`	-
justify	`start` \| `center` \| `end`	The justify content of the navbar content. It takes into account the correct space distribution.	`start`

NavbarItem Props

Attribute	Type	Description	Default
children	`ReactNode`	The children to render as the navbar item.	-
isActive	`boolean`	Whether the navbar item is active or not.	`false`

NavbarMenuToggle Props

Attribute	Type	Description	Default
icon	`ReactNode` \| `(isOpen: boolean \| undefined) => ReactNode \| null;`	The icon to render as the navbar menu toggle.	-
isSelected	`boolean`	Whether the navbar menu toggle is selected. (controlled)	`false`
defaultSelected	`boolean`	Whether the navbar menu toggle is selected by default. (uncontrolled)	`false`
srOnlyText	`string`	The text to be used by screen readers.	`open`/`close` navigation menu

NavbarMenuToggle Events

Attribute	Type	Description
onChange	`(isOpen: boolean) => void`	Handler that is called when the navbar menu toggle is pressed.

NavbarMenu Props

Attribute	Type	Description	Default
children*	`ReactNode[]`	The children to render as the navbar menu. Usually a list of `NavbarMenuItem` components.	-
portalContainer	`HTMLElement`	The container element in which the navbar menu overlay portal will be placed.	`document.body`
motionProps	MotionProps	The motion props to control the `open` / `close` animation. This motion is only available if the `disableAnimation` prop is set to `false`.	-

NavbarMenuItem Props

Attribute	Type	Description	Default
children	`ReactNode`	The children to render as the menu item.	-
isActive	`boolean`	Whether the menu item is active or not.	`false`

Note: The rest of the navbar components such as NavbarMenuItem and NavbarBrand have the same props as the li element.

Motion Props

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