MobileTabBar
Bottom bar with four destinations, a badge and an active tab.
Draft launch checklist
Research
PNBook crew interviews
Ops
LSIcon audit
Design
MCHarbour launch
09:00, Maya
Mobile design review
14:00, Jonas
In context
Harbour rebrand
12 of 14 done
Tideline mobile
Review, 3 open
Crew interviews
Late by 2 days
Rota export
Done
7 tasks due, 3 today.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
items | MobileTabBarItem[] | Yes | — |
activeIndex | number | undefined | No | — |
defaultActiveIndex | number | undefined | No | 0 |
onActiveChange | ((index: number) => void) | undefined | No | — |
renderLink | ((props: { href: string; children: ReactNode; className?: string | undefined; onClick?: (() => void) | undefined; "aria-current"?: "page" | undefined; }) => ReactNode) | undefined | No | — |
className | string | undefined | No | — |
position | "fixed" | "static" | undefined | No | fixed |
aria-label | string | undefined | No | Primary |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
Accessibility
A plain <nav aria-label="Primary"> of real, keyboard-focusable <button> or <a> targets (renderLink for a framework router). Every item is at least 44×44 CSS px and always shows both an icon and a label. The active item carries aria-current="page".
data-rebar-* attributes
data-rebar-component="mobile-tab-bar" on the <nav>; data-rebar-part="item" on each item wrapper.
Migrating to Ant Design
AntD has no direct equivalent; a bottom tab bar is a mobile-native pattern. antd-mobile's TabBar is the closer sibling library if the migration target is genuinely mobile.