Sidebar Navigation — Full (Menu First)
The default navigation pattern for dashboards. A full-width sidebar with a logo
at the top, a collapsible navigation tree with group labels, and a bottom branding
section. The sidebar collapses to an icon-only rail via a toggle. The active link
is marked by a 4px left-edge bar using --color-primary. Tree hierarchy
is shown with vertical and horizontal connecting lines using --color-divider.
CSS variables
| Variable | Theme field | Used for |
|---|---|---|
--color-app-bg | global_colors.app_background | Page body background behind the sidebar |
--color-surface | global_colors.menu_background | Sidebar panel fill, tree toggle button background |
--color-heading | global_colors.heading_color | Nav link label text (default/inactive state) |
--color-primary | global_colors.primary_color | Active link text, active 4px indicator bar, hover link text, tree toggle text and active background, terms link |
--color-hover-surface | global_colors.hover_surface | Nav link hover background |
--color-muted | global_colors.muted_color | Section group label text (e.g. "DASHBOARD") |
--color-divider | global_colors.divider_color | Vertical and horizontal tree connector lines |
--color-light-grey | global_colors.light_grey_color | Tree toggle button border, info icon drop shadow |
--radius-base | layout.border_radius | Nav link corner radius |
Typography tokens
| Token | Theme field | Used for |
|---|---|---|
theme.typography.h5_size | typography.h5_size | Nav link label font size |
theme.typography.h6_size + 2px | typography.h6_size | Sub-link (nested item) font size |
theme.typography.small_size | typography.small_size | Bottom branding area font size |
Full sidebar
Logo, section group labels, nav links with tree hierarchy, and a bottom branding area. Collapses to an icon rail when the toggle is activated. The 4px --color-primary bar on the left edge of the active link is the consistent active state indicator across both sidebar patterns.