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.

Settings shell

The page scaffold shared by every settings page (Account, Partner, Conveyancing). It wraps the sidebar: the shell renders the title + subtitle header, the responsive sidebar grid, the x-sync sidebar rail, and the Alpine-AJAX swap target — the page only declares its TabNavModel and drops its section content in the slot. With a single tab the rail is omitted and the content runs full-width.

<koala-settings-shell>

Account settings

Manage your account.

Profile

Active section content.

<koala-settings-shell model="settingsTabNav" subtitle="Manage your account.">
    <div id="account-settings-tabs">
        @* active section content *@
    </div>
</koala-settings-shell>

Attribute	Values	Notes
model	TabNavModel	Required. The same model the sidebar takes; `TargetId` names the Alpine-AJAX swap target the tab links land in, so cross-page navigation lands here.
title	string	Page title rendered by the shell. Default `Settings`.
subtitle	string?	Optional muted line under the title. Null/blank hides it.