Design System

Sidebar

The sidebar provides the primary vertical navigation for the application. It supports a main menu with expandable sections, an active state for the current page, and a detail sub-menu for drill-down navigation into specific entities. All colours use semantic tokens that adapt automatically between light and dark modes.

Preview

Interactive sidebar with clickable navigation items. Click any item to see the active state change. The left panel shows the main menu; the right panel shows a detail sub-menu with a back link. Toggle dark mode with the moon/sun icon.

Menu Navigation

Detail Sub Menu

Nav Item States

Each navigation item supports five visual states: default, hover, focus, active, and a submenu variant with a chevron indicator.

Home

Default

Home

Hover

Home

Focus

Home

Active

Admin Tools

With Submenu

Specifications

Sidebar Container

Width

255px

Padding

0px 10px

Nav Item Gap

4px

Collapse Button

32px 28px

Nav Item

Padding

10px 10px

Border Radius

8px

Font Size

14px

Icon Size

16px

Icon to Text Gap

14px

Font Weight (Inactive)

Regular / 400

Font Weight (Active / Parent)

Medium / 500

Org Filter Padding

10px 10px

Theming

The sidebar uses dedicated navigation semantic tokens for text, icons, active states, and hover states. These tokens adapt automatically between light and dark modes.

Surface

Property

Token

Light

Dark

Background

--bg-sidebar

white

gray.900

Border

--border-subtle

gray.100

gray.800

Navigation Text

Property

Token

Light

Dark

Nav Text

--nav-text

tertiary.600

gray.400

Nav Text Active

--nav-text-active

secondary.700

secondary.500

Nav Icon

--text-faint

gray.400

gray.600

Nav Icon Active

--nav-text-active

secondary.700

secondary.500

Chevron

--text-faint

gray.400

gray.600

Nav Item States

Property

Token

Light

Dark

Active BG

--nav-bg-active

secondary.50

gray.800

Hover BG

--nav-bg-hover

gray.50

gray.800

Focus Ring

--secondary-500

secondary.500

Detail Sub Menu

Property

Token

Light

Dark

Back Link

--nav-back-link

secondary.700

Best Practices

Keep sidebar width fixed at 255px to maintain layout consistency

Use nav.text.active for both the active icon and label to reinforce the selected state

Limit navigation depth to two levels: main menu and detail sub-menu

Collapse expanded sections when navigating to a detail sub-menu to reduce clutter

Don't

Don't nest more than two levels of navigation within the sidebar

Don't use different icon sizes between parent and child navigation items

Don't hardcode colour values — always use semantic tokens for theme support

Don't omit the back link in detail sub-menus — users need a clear escape path

Accessibility

Landmark Role

Use the <nav> element or role="navigation" with an aria-label (e.g., "Main navigation") so assistive technologies identify the sidebar as a navigation landmark. For the detail sub-menu, use a separate <nav> with a distinct label.

Keyboard Navigation

All nav items must be focusable and activated with Enter or Space. Arrow keys should move between items. Expandable sections should toggle with Enter/Space and use aria-expanded to communicate state. The chevron icon alone should not be a separate tab stop.

Current Page Indicator

Use aria-current="page" on the active navigation item so screen readers announce the current location. The visual active state (brand background + text) provides a sighted cue, but the ARIA attribute is essential for non-visual users.