order
NavIndex
A vertical list of links with search and category chips that appear once the list is long.
Crew directoryTwelve people: search and chips appear. Try filtering
In context
SidebarThe index beside a person's page
Aisha Bello
Ferry deckhand, interviewed 6 Oct.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
items | NavIndexItem[] | Yes | — |
categoryLabels | Record<string, string> | undefined | No | — |
statusLabels | Record<string, string> | undefined | No | — |
unstatusedLabel | string | undefined | No | Other |
searchPlaceholder | string | undefined | No | Search… |
renderLink | ((props: { href: string; children: ReactNode; className?: string | undefined; }) => ReactNode) | undefined | No | — |
className | string | undefined | No | — |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
Behaviour
- An item with no
categoryalways renders above the list, in bold, untouched by search or filters. - A
statusrenders as a realTagnext to the label, never inside the label text. - Search and category chips only appear once the list passes 12 items.
Accessibility
A real <nav aria-label>; category chips are <button aria-pressed>; every item is a real link via renderLink.
data-rebar-* attributes
data-rebar-component="nav-index"; data-rebar-part is "controls", "search", "chips", "chip" (data-rebar-active on the selected one), "overview-item", "item" or "empty".
Migrating to Ant Design
Not codemod-covered. A Menu with a controlled Input.Search and manual filtering is the nearest match.