Sidebar navigation

SidebarNavigation is the canonical app shell sidebar. Fixed position, vertical layout, four labeled regions (logo, nav items, footer actions, user section). Use for apps with persistent navigation that benefits from being always-visible.

For top-bar navigation in marketing sites, use NavBar. For tab-style section navigation within a page, use TabBar.

Use it for

• Application chrome where navigation should always be visible
• Settings shells with many sections
• Dashboards with primary + secondary + utility sections
• Any layout where ≥5 nav items would overflow a horizontal NavBar

Import

import { SidebarNavigation } from '@brikdesigns/bds';

Anatomy

The sidebar has four labeled regions, top to bottom:

1. Logo (required) — branding mark or wordmark
2. Nav items (required) — primary navigation links with optional icons and active state
3. Footer actions (optional) — secondary actions (settings, theme toggle, help)
4. User section (optional) — account chip with avatar / email / sign-out

Variants

Default

<SidebarNavigation
  logo={<img src="/logo.svg" alt="Brand" />}
  navItems={[
    { label: 'Dashboard', href: '/dashboard', active: true },
    { label: 'Projects', href: '/projects' },
    { label: 'Settings', href: '/settings' },
  ]}
/>

With icons

Each nav item accepts an icon rendered before the label.

<SidebarNavigation
  logo={<Logo />}
  navItems={[
    { label: 'Dashboard', href: '/dashboard', icon: <DashboardIcon />, active: true },
    { label: 'Projects', href: '/projects', icon: <FolderIcon /> },
    { label: 'Settings', href: '/settings', icon: <CogIcon /> },
  ]}
/>

With footer actions and user section

<SidebarNavigation
  logo={<Logo />}
  navItems={navItems}
  footerActions={
    <Button variant="primary" size="sm" fullWidth>New project</Button>
  }
  userSection={
    <div>
      <Avatar src={user.avatarUrl} />
      <span>{user.email}</span>
      <Button variant="ghost" size="sm">Sign out</Button>
    </div>
  }
/>

Custom width

Default is 260px. Override for compact (icon-only) or wide layouts.

<SidebarNavigation logo={<Logo />} navItems={items} width="320px" />

When not to use

• Don't use SidebarNavigation for ≤3 nav items. Use NavBar — a tall sidebar with 2 items reads as wasted space.
• Don't pair SidebarNavigation with NavBar in the same layout. Pick one primary nav surface; secondary nav goes inside the main content area as TabBar / Breadcrumb.

Accessibility

• Renders a <nav aria-label="Primary"> region.
• Each nav item is a real <a> (or <button> if onClick instead of href).
• Active item carries aria-current="page".
• Keyboard navigation follows DOM order — Tab moves between regions.
• The user section's avatar accepts an alt text via the underlying Avatar component.

API

SidebarNavItem

interface SidebarNavItem {
  label: ReactNode;
  href?: string;
  icon?: ReactNode;
  active?: boolean;
  onClick?: () => void;
}

Related

• NavBar — top-bar alternative for marketing sites
• TabBar — secondary section navigation inside the main content area
• Breadcrumb — hierarchical position within a section
• Storybook playground