Coach Stories

Category nav

The story filter: a quiet vertical list in the desktop rail, a scrolling row of tabs on mobile. The active one goes from stone to ink.

components/coach/category-nav.tsx

Examples

Click a category. Narrow the window, or switch the frame below to mobile, for tabs

Responsive

The same component in a frame at a real device width, so its breakpoint fires.
390pxOpen

Usage

components/coach/category-nav.tsx
import { CategoryNav } from "@/components/coach/category-nav";

const [active, setActive] = useState("latest");

<CategoryNav categories={categories} active={active} onChange={setActive} />

Props

PropTypeDefaultDescription
categories*{ id: string; label: string }[]—In order. The first is usually Latest, which shows everything.
active*string—The id of the current category. Sets aria-pressed.
onChange(id: string) => void—Called with the chosen id.
classNamestring—Merged last, so it can override layout. Keep brand styling in the component.

Guidance

Do

  • Keep labels short: Our story, Runway, News & events.

Don't

  • Add counts or icons. The rail is meant to be quiet next to the pictures.

Where it's used