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. Interactive Component Playground
TuxTabs Workbench
Presets:
Viewing tab panel: overview
Properties Inspector3 configurable knobs
Tab Orientation
orientationTypography Variant
variantSurface Size
sizeDynamic Component Syntax
<tux-tabs v-model="activeTab" :items="reportItems" />flagship · horizontal
Section nav inside a report
Active tab: overview. Content slot would render the matching section here.
<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.
Settings section: appearance.
<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.
Tab: results.
<tux-tabs v-model="active" :items="items" variant="bold" />