Sidebar Navigation

A vertical navigation list with sections, icons, and active state indicators. Designed for app shells and dashboard layouts.

Preview

WorkspaceSettings

Anatomy

• Section header — uppercase muted label grouping related items.
• Item — icon + label row, with optional badge count.
• Active item — left border accent, tinted background, brand colour.
• Badge — pill-shaped counter on the right side.

Props

Prop	Type	Default	Description
items	NavItem[]	--	Navigation items
activeId	string	--	Currently active item ID
onSelect	(id: string) => void	--	Selection handler

NavItem

Field	Type	Description
id	string	Unique identifier
label	string	Item text
icon	ReactNode	Leading icon
badge	string | number	Counter badge
section	string	Section header (renders before item)
children	NavItem[]	Collapsible sub-items

Code example

React

import { SidebarNav } from '@thepace/lexicon/components';

<SidebarNav
  activeId="dashboard"
  items={[
    { section: 'Workspace' },
    { id: 'dashboard', label: 'Dashboard', icon: <GridIcon />, badge: 3 },
    { id: 'projects', label: 'Projects', icon: <FolderIcon /> },
    { section: 'Settings' },
    { id: 'prefs', label: 'Preferences', icon: <SettingsIcon /> },
  ]}
  onSelect={setActiveId}
/>

Vanilla HTML

<nav class="lex-sidebar-nav" aria-label="Main navigation">
  <span class="lex-sidebar-nav__section">Workspace</span>
  <a class="lex-sidebar-nav__item lex-sidebar-nav__item--active"
     href="/dashboard" aria-current="page">
    <!-- icon -->
    <span>Dashboard</span>
    <span class="lex-sidebar-nav__badge">3</span>
  </a>
  <a class="lex-sidebar-nav__item" href="/projects">
    <!-- icon -->
    <span>Projects</span>
  </a>
</nav>

CSS class reference

Class	Purpose
.lex-sidebar-nav	Container
.lex-sidebar-nav__section	Section header
.lex-sidebar-nav__item	Nav item
.lex-sidebar-nav__item--active	Active state
.lex-sidebar-nav__icon	Leading icon
.lex-sidebar-nav__badge	Counter badge
.lex-sidebar-nav__chevron	Collapsible indicator

Accessibility

• Wrap in <nav aria-label="Main navigation">.
• Active item uses aria-current="page".
• Collapsible groups use aria-expanded.
• Keyboard: Tab navigates between items.

Guidelines

Do

• Keep section groups to 3–7 items.
• Use badges sparingly — only for actionable counts.
• Highlight the active page with aria-current="page".

Don't

• Don't use more than 2 nesting levels.
• Don't duplicate the sidebar items in a top navbar.