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.

<koala-settings-sidebar>

Canonical

Partner terms

Active section content.

@{
    var settingsTabNav = new TabNavModel
    {
        TargetId = "settings-tabs",
        ActiveTab = Model.ActiveTab,
        PushHistory = false,
        Breakpoint = "lg",
        Tabs =
        [
            new TabItem { Key = "organisation", Label = "General", Url = "?tab=organisation", Skeleton = "form", Icon = IconName.Building },
            new TabItem { Key = "quotes",       Label = "Quotes",  Url = "?tab=quotes",       Skeleton = "form", Icon = IconName.MessageCircleQuestion },
            new TabItem { Key = "fees",         Label = "Fees",    Url = "?tab=fees",         Skeleton = "form", Icon = IconName.Fee },
        ]
    };
}
<div class="grid grid-cols-1 lg:grid-cols-[200px_1fr] gap-x-8 gap-y-6">
    <koala-settings-sidebar model="settingsTabNav" />
    <div>@* active section content *@</div>
</div>

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 variants

Organisation settings — desktop rail

Partner terms

Active section content.

Account settings — shorter rail

Profile

Avatar, name, contact email.

Mobile — dropdown collapse

Partner terms

States

4 states

Active

Partner terms

Hover

Discounts

Idle

Quotes

Needs attention

Set NeedsAttention = true on the TabItem to surface a small amber dot beside the label. Use when the destination has unfinished setup the user should finish.

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.