Sidebar
FreeA vertical navigation panel positioned along the left edge of the layout. Contains grouped navigation links organised into collapsible sections, with optional icons beside each label. Supports a pinned/collapsed state that shrinks to icon-only mode, freeing horizontal space for content.
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Expanded | Full-width sidebar showing icons and text labels for all items. | Use as the default state on desktop viewports with sufficient horizontal space. |
| Collapsed | Icon-only sidebar with tooltip labels on hover. | Use when the user pins the sidebar closed or on narrower desktop screens. |
| With Sections |
Usage Guidelines
Wrap the sidebar in <nav aria-label="Sidebar"> to create a distinct landmark.
Nest more than two levels of navigation — flatten the hierarchy instead.
Use aria-expanded on collapsible group headings to communicate open/closed state.
Remove text labels in expanded mode — icons alone are not sufficient for primary nav.
Highlight the current page link with aria-current="page".
Auto-collapse the sidebar without providing a way to re-expand it.
Provide a toggle button with aria-label="Collapse sidebar" / "Expand sidebar".
Use the sidebar for actions — it is for navigation only.
Code
<nav class="lex-sidebar" aria-label="Sidebar">
<div class="lex-sidebar__group">
<button class="lex-sidebar__group-header" aria-expanded="true">
....lex-sidebar {
width: var(--lex-sidebar-width, 260px);
height: 100vh;
background: var(--lex-bg-surface-subtle);
...// Using Lexicon CSS classes with React
<Sidebar>
<SidebarGroup label="Dashboard" defaultOpen>
...Design Tokens
| Token | Value (dark) | Value (light) | CSS property |
|---|---|---|---|
| --lex-sidebar-width | — | — | width |
| --lex-sidebar-bg | — | — | bg |
| --lex-sidebar-border | — | — | border |
| --lex-sidebar-item-padding | — | — | padding |
| --lex-sidebar-item-active-bg | — | — | bg |
Accessibility
- Use <nav aria-label="Sidebar"> to distinguish from other nav landmarks on the page.
- Collapsible section headings must toggle aria-expanded between "true" and "false".
- Current page link uses aria-current="page" for screen reader context.
- Collapsed icon-only mode must surface text labels via tooltips or aria-label on each link.
- Overlay sidebar on mobile should trap focus while open and return focus to the trigger on close.