Layout

Navbar

Composable header primitives with a reusable hamburger menu for mobile navigation.

Component

31

Import

import {
  MobileMenu,
  MobileMenuContent,
  MobileMenuLink,
  MobileMenuNav,
  MobileMenuTrigger,
  Navbar,
  NavbarActions,
  NavbarBrand,
  NavbarDropdown,
  NavbarDropdownContent,
  NavbarDropdownLink,
  NavbarDropdownTrigger,
  NavbarLink,
  NavbarNav,
} from "@swirski/ui";

Composition

Navbar
|-- NavbarBrand
|-- NavbarNav
|   |-- NavbarLink
|   `-- NavbarDropdown
|       |-- NavbarDropdownTrigger
|       |-- NavbarDropdownContent
|       `-- NavbarDropdownLink
`-- NavbarActions
    `-- MobileMenu
        |-- MobileMenuTrigger
        `-- MobileMenuContent
            |-- MobileMenuHeader
            |   |-- MobileMenuTitle
            |   `-- MobileMenuClose
            `-- MobileMenuNav
                `-- MobileMenuLink

Playground

4 controls

Swirski UI

Controls

brand

active

mobileOpen

mobileSide

Usage

<Navbar>
  <NavbarBrand href="/">Swirski UI</NavbarBrand>
  <NavbarNav aria-label="Main navigation">
    <NavbarLink href="/components" active>Components</NavbarLink>
    <NavbarLink href="/hooks">Hooks</NavbarLink>
    <NavbarDropdown>
      <NavbarDropdownTrigger>More</NavbarDropdownTrigger>
      <NavbarDropdownContent align="end">
        <NavbarDropdownLink href="/system">System</NavbarDropdownLink>
        <NavbarDropdownLink href="/cli">CLI</NavbarDropdownLink>
      </NavbarDropdownContent>
    </NavbarDropdown>
  </NavbarNav>
</Navbar>

Props

85 generated

Prop	Type	Default	Notes
`MobileMenuContent.side`	`'left' \| 'right'`	`"right"`	Side used for the menu panel.
`MobileMenuContent.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from MobileMenuContentProps.
`MobileMenuContent.tone`	`'default'`	`"default"`	Generated from MobileMenuContentProps.
`MobileMenuContent.variant`	`'default' \| 'compact'`	`"default"`	Generated from MobileMenuContentProps.
`MobileMenu.children`Required	`ReactNode`	`-`	Generated from MobileMenuProps.
`MobileMenu.defaultOpen`	`boolean`	`false`	Initial uncontrolled open state.
`MobileMenu.onOpenChange`	`((open: boolean) => void)`	`-`	Generated from MobileMenuProps.
`MobileMenu.open`	`boolean`	`-`	Controlled mobile menu open state.
`MobileMenu.size`	`'sm' \| 'md' \| 'lg'`	`-`	Generated from MobileMenuProps.
`MobileMenu.tone`	`'default'`	`-`	Generated from MobileMenuProps.
`MobileMenu.variant`	`'default' \| 'compact'`	`-`	Generated from MobileMenuProps.
`MobileMenuTrigger.asChild`	`boolean`	`false`	Generated from MobileMenuTriggerProps.
`MobileMenuTrigger.label`	`string`	`"Open navigation menu"`	Generated from MobileMenuTriggerProps.
`MobileMenuTrigger.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from MobileMenuTriggerProps.
`MobileMenuTrigger.tone`	`'default'`	`"default"`	Generated from MobileMenuTriggerProps.
`MobileMenuTrigger.variant`	`'default' \| 'compact'`	`"default"`	Generated from MobileMenuTriggerProps.
`MobileMenuClose.asChild`	`boolean`	`false`	Generated from MobileMenuCloseProps.
`MobileMenuClose.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from MobileMenuCloseProps.
`MobileMenuClose.tone`	`'default'`	`"default"`	Generated from MobileMenuCloseProps.
`MobileMenuClose.variant`	`'default' \| 'compact'`	`"default"`	Generated from MobileMenuCloseProps.
`MobileMenuHeader.asChild`	`boolean`	`false`	Generated from MobileMenuHeaderProps.
`MobileMenuHeader.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from MobileMenuHeaderProps.
`MobileMenuHeader.tone`	`'default'`	`"default"`	Generated from MobileMenuHeaderProps.
`MobileMenuHeader.variant`	`'default' \| 'compact'`	`"default"`	Generated from MobileMenuHeaderProps.
`MobileMenuTitle.asChild`	`boolean`	`false`	Generated from MobileMenuTitleProps.
`MobileMenuTitle.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from MobileMenuTitleProps.
`MobileMenuTitle.tone`	`'default'`	`"default"`	Generated from MobileMenuTitleProps.
`MobileMenuTitle.variant`	`'default' \| 'compact'`	`"default"`	Generated from MobileMenuTitleProps.
`MobileMenuNav.asChild`	`boolean`	`false`	Generated from MobileMenuNavProps.
`MobileMenuNav.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from MobileMenuNavProps.
`MobileMenuNav.tone`	`'default'`	`"default"`	Generated from MobileMenuNavProps.
`MobileMenuNav.variant`	`'default' \| 'compact'`	`"default"`	Generated from MobileMenuNavProps.
`MobileMenuLink.active`	`boolean`	`false`	Generated from MobileMenuLinkProps.
`MobileMenuLink.as`	`ElementType`	`-`	Generated from MobileMenuLinkProps.
`MobileMenuLink.asChild`	`boolean`	`false`	Generated from MobileMenuLinkProps.
`MobileMenuLink.closeOnSelect`	`boolean`	`true`	Closes the menu after a link is selected.
`MobileMenuLink.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from MobileMenuLinkProps.
`MobileMenuLink.tone`	`'default'`	`"default"`	Generated from MobileMenuLinkProps.
`MobileMenuLink.variant`	`'default' \| 'compact'`	`"default"`	Generated from MobileMenuLinkProps.
`Navbar.asChild`	`boolean`	`false`	Generated from NavbarProps.
`Navbar.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from NavbarProps.
`Navbar.tone`	`'default'`	`"default"`	Generated from NavbarProps.
`Navbar.variant`	`'default' \| 'compact'`	`"default"`	Generated from NavbarProps.
`NavbarBrand.as`	`ElementType`	`-`	Generated from NavbarBrandProps.
`NavbarBrand.asChild`	`boolean`	`false`	Generated from NavbarBrandProps.
`NavbarBrand.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from NavbarBrandProps.
`NavbarBrand.tone`	`'default'`	`"default"`	Generated from NavbarBrandProps.
`NavbarBrand.variant`	`'default' \| 'compact'`	`"default"`	Generated from NavbarBrandProps.
`NavbarNav.asChild`	`boolean`	`false`	Generated from NavbarNavProps.
`NavbarNav.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from NavbarNavProps.
`NavbarNav.tone`	`'default'`	`"default"`	Generated from NavbarNavProps.
`NavbarNav.variant`	`'default' \| 'compact'`	`"default"`	Generated from NavbarNavProps.
`NavbarLink.active`	`boolean`	`false`	Marks a link as the current page.
`NavbarLink.as`	`ElementType`	`-`	Generated from NavbarLinkProps.
`NavbarLink.asChild`	`boolean`	`false`	Generated from NavbarLinkProps.
`NavbarLink.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from NavbarLinkProps.
`NavbarLink.tone`	`'default'`	`"default"`	Generated from NavbarLinkProps.
`NavbarLink.variant`	`'default' \| 'compact'`	`"default"`	Generated from NavbarLinkProps.
`NavbarDropdown.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from NavbarDropdownProps.
`NavbarDropdown.tone`	`'default'`	`"default"`	Generated from NavbarDropdownProps.
`NavbarDropdown.variant`	`'default' \| 'compact'`	`"default"`	Generated from NavbarDropdownProps.
`NavbarDropdownTrigger.active`	`boolean`	`false`	Styles the dropdown trigger as active.
`NavbarDropdownTrigger.asChild`	`boolean`	`false`	Generated from NavbarDropdownTriggerProps.
`NavbarDropdownTrigger.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from NavbarDropdownTriggerProps.
`NavbarDropdownTrigger.tone`	`'default'`	`"default"`	Generated from NavbarDropdownTriggerProps.
`NavbarDropdownTrigger.variant`	`'default' \| 'compact'`	`"default"`	Generated from NavbarDropdownTriggerProps.
`NavbarDropdownContent.align`	`'start' \| 'end'`	`"start"`	Aligns the dropdown panel to the trigger.
`NavbarDropdownContent.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from NavbarDropdownContentProps.
`NavbarDropdownContent.tone`	`'default'`	`"default"`	Generated from NavbarDropdownContentProps.
`NavbarDropdownContent.variant`	`'default' \| 'compact'`	`"default"`	Generated from NavbarDropdownContentProps.
`NavbarDropdownItem.active`	`boolean`	`-`	Generated from NavbarDropdownItemProps.
`NavbarDropdownItem.asChild`	`boolean`	`-`	Generated from NavbarDropdownItemProps.
`NavbarDropdownItem.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from NavbarDropdownItemProps.
`NavbarDropdownItem.tone`	`'default'`	`"default"`	Generated from NavbarDropdownItemProps.
`NavbarDropdownItem.variant`	`'default' \| 'compact'`	`"default"`	Generated from NavbarDropdownItemProps.
`NavbarDropdownLink.active`	`boolean`	`false`	Marks a dropdown link as the current page.
`NavbarDropdownLink.as`	`ElementType`	`-`	Generated from NavbarDropdownLinkProps.
`NavbarDropdownLink.asChild`	`boolean`	`false`	Generated from NavbarDropdownLinkProps.
`NavbarDropdownLink.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from NavbarDropdownLinkProps.
`NavbarDropdownLink.tone`	`'default'`	`"default"`	Generated from NavbarDropdownLinkProps.
`NavbarDropdownLink.variant`	`'default' \| 'compact'`	`"default"`	Generated from NavbarDropdownLinkProps.
`NavbarActions.asChild`	`boolean`	`false`	Generated from NavbarActionsProps.
`NavbarActions.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from NavbarActionsProps.
`NavbarActions.tone`	`'default'`	`"default"`	Generated from NavbarActionsProps.
`NavbarActions.variant`	`'default' \| 'compact'`	`"default"`	Generated from NavbarActionsProps.
`Navbar`	`HTMLAttributes<HTMLElement>`	`-`	Props forwarded to the root header.
`NavbarBrand`	`AnchorHTMLAttributes<HTMLAnchorElement>`	`-`	Props forwarded to the brand link.
`NavbarNav`	`HTMLAttributes<HTMLElement>`	`-`	Props forwarded to the desktop nav.

Previous: Avatar Next: Breadcrumb