Components
Settings sidebar
Settings sidebar
Vertical tab navigation for settings-style pages with four or more sections. Renders as a 200px left rail at lg+ and collapses to a dropdown below.
Canonical
Partner terms
Active section content.
Composed pattern: <koala-settings-sidebar> renders the vertical nav, the page renders the content for the active tab. The active key comes from ?tab=<key>.
Variants
3 variantsOrganisation settings — desktop rail
Partner terms
Active section content.
Account settings — shorter rail
Profile
Avatar, name, contact email.
Mobile — dropdown collapse
Partner terms
States
3 statesActive
Partner terms
Hover
Discounts
Idle
Quotes
Props
4 model fields| Field | Type | Notes |
|---|---|---|
| Tabs | IReadOnlyList<TabItem> | Reuses the TabNavModel record from horizontal tabs. |
| ActiveTab | string | Key of the active tab; comes from ?tab=<key>. |
| PushHistory | bool | Settings tab swaps should not grow back-history. |
| Breakpoint | "lg" | Literal lg — Tailwind can't see interpolated breakpoints. |
Do & don't
Partner terms
Do
Reach for the sidebar when there are four or more sections. Pin to the page header so it stays in view while sections scroll.
Don't
Don't cram eight horizontal tabs — the list runs off screen and the user can't see where they are.