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

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.

Variants

4 variants

Home

NavLink

is-active="false"

Home

Active

is-active="true"

Get a quote

CTA

cta="true"

Settings

Tray destination

tray="true"

States

4 states

Home

Default

Hover me

Hover

Underline slides in from the left of the label.

Tab to me

Focus

Use the keyboard to reach it.

Home

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, ActivityList, 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.