Usage

import {
  Navbar,
  NavbarBrand,
  NavbarContent,
  NavbarItem,
  NavbarMenu,
  NavbarMenuItem,
  NavbarMenuToggle,
} from "@opengovsg/oui"

<Navbar>
  <NavbarBrand>
    <p className="font-bold">OUI</p>
  </NavbarBrand>
  <NavbarContent justify="center">
    <NavbarItem>
      <Link href="#">Features</Link>
    </NavbarItem>
    <NavbarItem isActive>
      <Link href="#">Customers</Link>
    </NavbarItem>
  </NavbarContent>
  <NavbarContent justify="end">
    <NavbarItem>
      <Link href="#">Login</Link>
    </NavbarItem>
  </NavbarContent>
</Navbar>

OUI 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.

Examples

With Menu

You can use the NavbarMenuToggle and NavbarMenu components to display a togglable menu. This is commonly used for mobile navigation.

Static

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

Show on Scroll Up

You can use the shouldShowOnScrollUp prop to make the navbar show when the user scrolls up. This is useful for providing quick access to navigation while maximizing content visibility.

Note: This prop only takes effect when position is set to static.

Controlled Menu

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

Without Border

By default, the navbar has a bottom border. You can use the hasBorder prop to control its visibility. Set hasBorder={false} to remove the bottom border from the navbar.

Customizing the Active Item

When the NavbarItem has isActive set to true, it will have a data-active attribute. You can use this attribute to customize the active state styling.

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. Used when the shouldShowOnScrollUp prop is true.

NavbarContent:

• data-justify: The justify content of the navbar content (start, center, or end).

NavbarItem has the following attributes on the base element:

• data-active: Indicates if the navbar item is active. Set when the isActive prop is true.

NavbarMenuToggle has the following attributes on the base element:

• data-open: Indicates if the navbar menu is open.
• data-pressed: When the navbar menu toggle is pressed.
• data-hover: When the navbar menu toggle is being hovered.
• data-focus-visible: When the navbar menu toggle is being focused with the keyboard.

NavbarMenuItem has the following attributes on the base element:

• data-active: Indicates if the menu item is active. Set when the isActive prop is true.
• data-open: Indicates if the navbar menu is open.

API Reference

Navbar Props

Navbar Events

NavbarContent Props

NavbarItem Props

NavbarMenuToggle Props

NavbarMenu Props

NavbarMenuItem Props