Notes from the field
A journal of the decisions behind the surface: what changed, what stayed, and what is still unknown.
Pill nav
A compact pill navigation with a rising fill, rolling labels, and a sliding active dot.
Implementation
1"use client";2 3import {4 useEffect,5 useRef,6 useState,7 type CSSProperties,8 type HTMLAttributes,9 type ReactNode,10} from "react";11 12export type PillNavItem = {13 id: string;14 label: string;15 href: string;16};17 18export type PillNavProps = Omit<19 HTMLAttributes<HTMLElement>,20 "children" | "onChange" | "title"21> & {22 /** Navigation destinations. */23 items: readonly PillNavItem[];24 /** Brand shown at the start of the rail. */25 brand?: ReactNode;26 /** Destination for the brand link. */27 brandHref?: string;28 /** Accessible name for the navigation landmark. */