Navbar

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


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.

With Menu

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.

Controlled Menu

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.

With Dropdown Menu

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

AttributeTypeDescriptionDefault
children*ReactNode[]The children to render. Usually navbar elements such as NavbarBrand, NavbarContent and NavbarItem-
heightstring | numberThe height of the navbar.4rem (64px)
positionstatic | stickyThe position of the navbar.sticky
maxWidthsm | md | lg | xl | 2xl | fullThe max width of the navbar wrapper.lg
parentRefReact.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
isBorderedbooleanWhether the navbar should have a bottom border or not.false
isBlurredbooleanWhether the navbar should have a blur effect or not.true
isMenuOpenbooleanIndicates if the navbar menu is open. (controlled)false
isMenuDefaultOpenbooleanIndicates if the navbar menu is open by default. (uncontrolled)false
shouldHideOnScrollbooleanIndicates if the navbar should hide on scroll.false
motionPropsMotionPropsThe motion props to control the visible / hidden animation. This motion is only available if the shouldHideOnScroll prop is set to true.-
disableScrollHandlerbooleanWhether the navbar parent scroll event should be listened to or not.false
disableAnimationbooleanWhether the navbar menu animation should be disabled or not.false
classNamesRecord<"base"| "wrapper"| "brand"| "content"| "item"| "toggle"| "toggleIcon"| "menu"| "menuItem", string>Allows to set custom class names for the navbar slots.-
AttributeTypeDescription
onMenuOpenChange(isOpen: boolean) => voidHandler that is called when the navbar menu open state changes.
onScrollPositionChange(position: number) => voidHandler 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.
AttributeTypeDescriptionDefault
children*ReactNode[]The children to render. Usually navbar elements such as NavbarBrand, NavbarContent and NavbarItem-
justifystart | center | endThe justify content of the navbar content. It takes into account the correct space distribution.start
AttributeTypeDescriptionDefault
childrenReactNodeThe children to render as the navbar item.-
isActivebooleanWhether the navbar item is active or not.false
AttributeTypeDescriptionDefault
iconReactNode | (isOpen: boolean | undefined) => ReactNode | null;The icon to render as the navbar menu toggle.-
isSelectedbooleanWhether the navbar menu toggle is selected. (controlled)false
defaultSelectedbooleanWhether the navbar menu toggle is selected by default. (uncontrolled)false
srOnlyTextstringThe text to be used by screen readers.open/close navigation menu
AttributeTypeDescription
onChange(isOpen: boolean) => voidHandler that is called when the navbar menu toggle is pressed.
AttributeTypeDescriptionDefault
children*ReactNode[]The children to render as the navbar menu. Usually a list of NavbarMenuItem components.-
portalContainerHTMLElementThe container element in which the navbar menu overlay portal will be placed.document.body
motionPropsMotionPropsThe motion props to control the open / close animation. This motion is only available if the disableAnimation prop is set to false.-
AttributeTypeDescriptionDefault
childrenReactNodeThe children to render as the menu item.-
isActivebooleanWhether 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/