IndexBar
A letter rail for jumping through a long list.
Aisha Bello
Ferry deckhand
Ben Okafor
Pilot boat skipper
Carys Hughes
Harbour office
Dev Patel
Marine engineer
Erin Walsh
Ferry deckhand
Fatima Khan
Dispatcher
Gareth Pryce
Crane operator
Hana Sato
Ferry crew
Ivan Petrov
Tug crew
Kwame Mensah
Dock supervisor
Niamh Byrne
Ferry crew
Tomas Larsen
Night watch
Jonas Weber
Engineering
Leo Santos
Operations
Maya Chen
Design
Priya Nair
Research
No people yet
Jonas Weber
Engineering
Leo Santos
Operations
Maya Chen
Design
Priya Nair
Research
In context
Aisha Bello
Ferry deckhand
Ben Okafor
Pilot boat skipper
Carys Hughes
Harbour office
Dev Patel
Marine engineer
Erin Walsh
Ferry deckhand
Fatima Khan
Dispatcher
Gareth Pryce
Crane operator
Hana Sato
Ferry crew
Ivan Petrov
Tug crew
Kwame Mensah
Dock supervisor
Niamh Byrne
Ferry crew
Tomas Larsen
Night watch
Jonas Weber
Engineering
Leo Santos
Operations
Maya Chen
Design
Priya Nair
Research
Props
| Prop | Type | Required | Default |
|---|---|---|---|
groups | IndexBarGroup<T>[] | Yes | — |
renderItem | (item: T, groupKey: string, index: number) => ReactNode | Yes | — |
renderGroupHeader | ((groupKey: string) => ReactNode) | undefined | No | — |
height | number | undefined | No | 400 |
aria-label | string | undefined | No | Jump to letter |
className | string | undefined | No | — |
Accessibility
The whole rail is one touch surface: press anywhere and drag, and the list jumps live while a bubble shows the letter under your finger. A plain tap on a letter works too, and every letter is a real, keyboard-focusable button.
data-rebar-* attributes
data-rebar-component="index-bar" on the root; parts: list, group, group-header, item, rail, rail-letter (each with data-index-key, and data-rebar-active while dragged over), bubble.
Migrating to Ant Design
Not codemod-covered: the pattern is antd-mobile's IndexBar, not the desktop antd package. A desktop migration usually means a plain list with a search box.