Secondary Top Navigation.

The Gecko-derived section tab row — a key component. It sits beneath the topbar, on an inset hairline, with an orange active underline that extends slightly past the label. Used for switching sections within a workspace (Portfolio / Watchlist / AI Mode / Reviews).

Live

Portfolio panel — content for the active section renders here. Click a tab; the orange underline tracks the selection.

Anatomy

• Tab labels: 15px — active is bold var(--text), inactive muted #8a96a0.
• Active underline: 2px var(--tab-active) (orange #FF8200), extends ~9px past the text each side.
• Inset hairline divider var(--border) — stops 32px short of both edges.
• Tab gap 42px; row top padding 26px.

Usage

In production this is the Tabs component (@/src/ds/components/nav/Tabs), route-driven via usePathname. Pass it to a shell's tabs prop or render it directly:

<Tabs tabs={[
  { href: "/portfolio",  label: "Portfolio" },
  { href: "/watchlist",  label: "Watchlist" },
  { href: "/ai-mode",    label: "AI Mode" },
  { href: "/reviews",    label: "Reviews" },
]} />