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.

Collapsible

Add a NavigationDrawerToggle to let the user shrink the drawer to an icon-only rail and expand it again. The toggle belongs outside NavigationDrawerHeader — the header hides its children while collapsed — which is exactly where NavigationDrawerLayout puts it.

Projects

Use the toggle above to collapse the drawer to an icon-only rail, then expand it again.

Collapsed

Pass defaultCollapsed to the provider to start as a rail — useful when the drawer is secondary to the page it sits beside.

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