Koala logo Design
Koala logo Design
No matches for “”
↑↓ navigate ↵ open Esc close
Components Nav items

Nav items

Sidebar rows. NavLink for standard destinations, CTA for the plum-filled "Get a quote" row at the top. Icons go in the tag body as raw SVG path content — the helper wraps them in the standard 24×24 svg.

<koala-nav-item>

Canonical

<koala-nav-item href="/home" is-active="true" label="Home" skeleton="Dashboard">
    <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-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
</koala-nav-item>

One CTA at the top, plain nav rows below. The active row gets aria-current="page" + a per-row animated underline; rows are skeleton-tagged so the right shape paints during navigation.

CTA — the plum-filled primary row, one per sidebar.

<koala-nav-item href="/quotes/new" is-active="false" label="Get a quote" skeleton="Form" cta="true">
    <path d="M12 5v14M5 12h14"></path>
</koala-nav-item>

Variants

5 variants
NavLink
is-active="false"
Active
is-active="true"
CTA
cta="true"
Tray destination
tray="true"
Needs attention
needs-attention="true"
Subtle amber dot next to the label — nudges to a destination with unfinished setup.

States

4 states
Default
Hover
Underline slides in from the left of the label.
Focus
Use the keyboard to reach it.
Current page

Props

7 attributes
Attribute Values Notes
href string Required. Navigation URL.
label string Visible text next to the icon, and the tippy tooltip when the sidebar is collapsed.
is-active bool Current page. Renders aria-current="page" + persistent underline.
cta bool Plum-filled CTA row. One per sidebar — reserved for the primary call to action.
tray bool Opens the destination in the side-tray on desktop, full-page on mobile.
skeleton PageSkeletonType Shape painted during navigation: Detail, Dashboard, List, Form, Settings.
li-class string? Extra classes appended to the wrapping <li> (e.g. xl:hidden).

Do & don't

Do One CTA at the top, plain rows below. Each row stays sized to its content on mobile so the sidebar feels light.
Don't Don't stack multiple CTAs in the sidebar. The hierarchy disappears — everything looks equally important.