Components Tabs

Tabs

Underlined tab bar with optional count pills, plus a mobile rich-trigger dropdown. Renders both from a single TabNavModel. Underneath, count pills use <span koala-tab-pill> — the auto-formatted number badge (12 → 12, 1500 → 1.5k, 2_000_000 → 2m).

<koala-tabs>

Canonical (helper)

Resize the window — below the sm breakpoint the bar collapses to a rich dropdown trigger; above it, the inline bar. Active tab gets aria-current="page"; mobile dropdown's open-state has aria-expanded wired.

Raw markup (what the helper renders)

For most pages you should use <koala-tabs model=…>; this section is a visual reference for what the helper emits.

Variants

3 variants

Plain — no pills

aria-current="page"

Count pills — auto-formatted

<span koala-tab-pill>1500</span> → 1.5k

Mobile — collapsed dropdown

_TabNavMobileDropdown

States

4 states

Quotes

Active

Hover me

Hover

Hover the label to see the underline appear.

Tab to me

Focus

Use the keyboard to reach it.

Inactive

Props

3 attributes

Attribute	Values	Notes
koala-tab-pill	bool (on a `<span>`)	Marks the span as a count pill. Inner number is auto-formatted to k / m for large counts.
class="tab-link"	—	Wraps every tab anchor. Adds the underline-on-hover and active-state animation (CSS in `app.css`).
aria-current	"page"	Set on the active tab. Drives the persistent underline + bold text.

Do & don't

Do Keep tabs to a small set of siblings under a single page. Use the count pill only when the number is interesting.

Don't Don't pack 7+ tabs into a single bar. Split into sections or use a sidebar — tabs lose their scan-at-a-glance affordance.