Nav items

Active and inactive states

Active items use a subtle neutral grey fill (bg-gray-200 in light mode, dark:bg-gray-700 in dark mode) with bold weight — Claude-style, so the brand primary is reserved for actions, not navigation state. Inactive items use gray-700 text with a hover-to-darker fill. No right-edge indicator bar — the fill alone signals state.

<koala-nav-item href="/partner" is-active="true" label="Home">
    <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path>
    <path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
</koala-nav-item>

<koala-nav-item href="/partner/quotes" is-active="false" label="Quotes">
    <path d="M18 7c0-5.333-8-5.333-8 0"></path>
    <path d="M10 7v14"></path>
    <path d="M6 21h12"></path>
    <path d="M6 13h10"></path>
</koala-nav-item>

CTA variant

Setting cta="true" renders the item with the same look as the Secondary button — filled --color-secondary (dark navy) with white text, so it stands out clearly against the flat, borderless nav items below it. Used for "Get a quote" at the top of the partner and conveyancing sidebars.

<koala-nav-item href="/partner/quotes/create" label="Get a quote" tray="true" cta="true">
    <path d="M5 12h14"></path>
    <path d="M12 5v14"></path>
</koala-nav-item>

Item flow

All sidebar items flow from the top in a single list — there's no "bottom" group. Permission-gated items (Team, Settings) sit alongside the others; the only thing pinned to the bottom of the sidebar is the desktop expand/collapse arrow, which lives in _Sidebar.cshtml outside the <ul>.

Collapsed sidebar

When the sidebar is collapsed, the label is hidden via x-show="!sidebarCollapsed || sidebarOpen". Only the icon remains visible, with the link still clickable.

Attribute reference