Navbar

Import#

• Navbar: The container component that manages composition.
• NavbarBrand: The component used for branding.
• NavbarContent: The component that contains navbar items.
• NavbarItem: A navbar item.
• NavbarLink: A navbar link.

import {
  Navbar,
  NavbarBrand,
  NavbarContent,
  NavbarItem,
  NavbarLink,
} from '@saas-ui/react'

Usage#

Basic navbar#

Sticky navbar#

Navbar uses position static by default, you can use sticky to make it stick to the top of the page.

Border bottom#

Simply add borderBottomWidth="1px" to the navbar to add a bottom border.

Blurred background#

Using a transparent background with a backdrop blur filter can add a glassy effect to the navbar.

Hide on scroll#

Setting the shouldHideOnScroll prop to true will hide the navbar when the user scrolls down and show it when the user scrolls up. Use the parentRef prop to specify the parent scroll container, defaults to the window object.

With mobile navigation#

Add a mobile navigation menu to the navbar using the Drawer component from @chakra-ui/react.

With user menu#

Example with an avatar and dropdown menu.

With search input#

An example with a global search input.

With breadcrumbs#

An example with breadcrumbs and a workspace dropdown menu.