Sidebars

This page covers two navigation building blocks. Sidebar is the collapsible app shell: a provider-backed vertical sidebar with a header, footer, grouped menus, and a toggle that persists its open state. NavigationMenu is a horizontal menu primitive (built on Radix) for top-of-page nav with optional dropdown content. Reach for Sidebar for the primary app navigation rail and NavigationMenu for a horizontal nav bar.

Live demo

The interactive story below runs from the deployed Storybook.

Sidebar

Source: sidebar.tsx

The sidebar is composed from a provider plus a set of slot components. Every Sidebar must be rendered inside a SidebarProvider, which owns the open/collapsed state, the keyboard shortcut (Cmd/Ctrl+B), and the responsive mobile sheet behavior.

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@beacon/design-system";

const navItems = [
  { title: "Dashboard", url: "#" },
  { title: "Projects", url: "#" },
  { title: "Schedule", url: "#" },
  { title: "Settings", url: "#" },
];

<SidebarProvider>
  <Sidebar>
    <SidebarHeader>
      <span className="px-2 text-lg font-semibold">Helm</span>
    </SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Navigation</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            {navItems.map((item) => (
              <SidebarMenuItem key={item.title}>
                <SidebarMenuButton asChild>
                  <a href={item.url}>{item.title}</a>
                </SidebarMenuButton>
              </SidebarMenuItem>
            ))}
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
    <SidebarFooter>
      <div className="px-2 py-2 text-xs text-muted-foreground">v1.0.0</div>
    </SidebarFooter>
  </Sidebar>
  <main className="flex-1 p-4">
    <SidebarTrigger />
  </main>
</SidebarProvider>

Sidebar parts

Part	Role
SidebarProvider	Required wrapper. Owns open state (defaultOpen, controlled open / onOpenChange), the toggle shortcut, and mobile behavior.
Sidebar	The sidebar shell. Props: side ("left" | "right"), variant ("sidebar" | "floating" | "inset"), collapsible ("offcanvas" | "icon" | "none").
SidebarTrigger	Button that toggles the sidebar open or collapsed.
SidebarRail	Thin draggable rail along the edge that also toggles the sidebar.
SidebarInset	The main content region that sits beside an inset sidebar.
SidebarHeader / SidebarFooter	Fixed regions at the top and bottom of the sidebar.
SidebarContent	Scrollable region between header and footer that holds the groups.
SidebarGroup	A section. SidebarGroupLabel, SidebarGroupAction, and SidebarGroupContent fill it.
SidebarMenu / SidebarMenuItem	The menu list and its items.
SidebarMenuButton	The clickable nav row. Props: asChild, isActive, tooltip, plus variant and size.
SidebarMenuAction / SidebarMenuBadge	A trailing action button and a count badge on a menu item.
SidebarMenuSub / SidebarMenuSubItem / SidebarMenuSubButton	Nested sub-menu for a menu item.
SidebarMenuSkeleton	Loading placeholder for a menu row.
SidebarInput / SidebarSeparator	A search input and a divider styled for the sidebar.
useSidebar	Hook exposing state, open, setOpen, toggleSidebar, and mobile state. Must be used inside SidebarProvider.

NavigationMenu

Source: navigation-menu.tsx

NavigationMenu is a horizontal nav primitive with accessible dropdown content, for use as a top nav bar rather than a vertical rail.

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@beacon/design-system";

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul className="grid gap-3 p-6 md:w-[400px]">
          <li>
            <NavigationMenuLink>Introduction</NavigationMenuLink>
          </li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink className={navigationMenuTriggerStyle()}>
        Documentation
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

NavigationMenu parts

Part	Role
NavigationMenu	Root container. Renders its own viewport for dropdown content.
NavigationMenuList	The horizontal row of top-level items.
NavigationMenuItem	A single item in the row.
NavigationMenuTrigger	A top-level item that opens dropdown content; renders a chevron.
NavigationMenuContent	The dropdown panel revealed by a trigger.
NavigationMenuLink	A plain navigational link. Apply navigationMenuTriggerStyle() to match trigger styling.
NavigationMenuIndicator	Animated arrow that points at the active trigger.
NavigationMenuViewport	The container the active content renders into.
navigationMenuTriggerStyle	A cva style helper for styling a link like a trigger.

When to use

• Use Sidebar for the primary, persistent app navigation rail with grouped destinations.
• Use NavigationMenu for a horizontal top nav with optional grouped dropdowns.
• Use SidebarMenuSub for one level of nested destinations under a menu item.

Do not use Sidebar to switch between sibling panels within a single page; that is what Tab bars are for.