Navigation Drawer

The application's primary side navigation — collapsible to icon-only on desktop, slide-in Sheet on mobile. Includes Header, Content, Footer, Group, Item, and Toggle building blocks.

Acme

Main

HomeInboxSettings

Anatomy

  • NavigationDrawerProvider — Holds the collapsed / mobile state. useNavigationDrawer() exposes it.
  • NavigationDrawerLayout — Convenience: provider + side panel + main column.
  • NavigationDrawerHeader — Top of the panel — typically logo + Toggle.
  • NavigationDrawerContent — Scrollable middle area for groups and items.
  • NavigationDrawerFooter — Pinned to the bottom.
  • NavigationDrawerToggle — A button that collapses/expands the drawer.
  • NavigationDrawerItem — A nav link. Pass icon, active, or asChild for routing-library wrappers.
  • NavigationDrawerGroup — Labeled section of items.

Responsive Behavior

Below the md breakpoint (768px) the panel renders inside a Sheet, controllable via useNavigationDrawer(). At wider widths it sits in the layout flow and collapses to icon-only when toggled.

Installation