DocsComponents
Bottom navigation
Phone navigation for parents and organisers.
Variants
Two roles, one component. The order and icons match the sidebar of each panel, so a phone user finds the same sections in the same order.
States
An item has three looks: rest (slate-400), current (white or chartreuse) and keyboard focus (slate-900 background). The colour change is the whole transition; there is no hover state on a touch bar.
API reference
Props of BottomNav. Icons and texts come from the app, so the component stays free of copy and icon libraries.
| Prop | Type | Default | Description |
|---|---|---|---|
role | "parent" | "organizer" | – | Parent: current item in white. Organiser: current item in the brand chartreuse, plus the “More” button. |
label | string | – | Accessible name of the nav landmark (aria-label), e.g. “Parent navigation”. |
items | list of items | – | Each item: href, label (short caption under the icon), ariaLabel (full name for screen readers), icon, current. Five for parents, four plus “More” for organisers. |
more | { label, icon, title, closeLabel, items } | – | Optional “More” button that opens a bottom sheet with the remaining sidebar sections; it lights up when one of them is current. |
link | link component | – | Router link injected by the app. |
Accessibility
- A labelled nav landmark of links; the current section carries aria-current="page", so “current” is not told by colour alone.
- Honest note: in the product the short captions get longer names for screen readers (“Bookings” → “My bookings”, “Home” → “Dashboard”). When the visible word is missing from the name, as with “Home”, it breaks WCAG 2.5.3 Label in Name: a voice-control user says “Home” and nothing happens. Recommendation: names that start with the caption (“Home, dashboard”). The live preview on this page uses the caption as the name.
- “More” is a button with aria-haspopup="dialog"; the sheet is a native modal dialog: focus trap, Esc closes, focus returns to “More”, a tap on the dimmed screen closes it.
- Targets: five equal columns, at least 44 px high.
- Contrast on slate-950: rest 7.9:1, current white 20.2:1, current chartreuse 17.8:1.