component · navigation

TuxTabs

Editorial-flavored tabs. Thin wrapper around UTabs that swaps the default accent for a 2px maroon underline + adds a bold intent (uppercase tracked) for navigational contexts where tabs should read in the same rhythm as eyebrows. Vertical orientation covers the roadmap's separate TuxTabsVertical entry — same component, different prop.

flagship · horizontal

Section nav inside a report

<tux-tabs v-model="active" :items="items" />

vertical · settings panel

Settings-style vertical tabs

For settings panels with 4–6 sections. The maroon active rule moves to the right edge of the tab list.

<tux-tabs
  v-model="active"
  :items="settingsItems"
  orientation="vertical"
/>

bold intent · eyebrow rhythm

Uppercase tracked tabs

Use variant="bold" when tabs sit next to other eyebrow-styled labels (research-report navigation, public landing pages). Reads as a section header, not a control.

<tux-tabs v-model="active" :items="items" variant="bold" />