Tab bar
Bottom navigation for phones: icon over label, the current one in the accent.
Examples
Tab bar
Anatomy
nav.tabbar | Fixed to the bottom edge, full width, with a hairline above. Items share the width equally; the bottom padding clears the home indicator. |
> a | One destination: icon stacked over a short label. |
a > i | The icon, at the large text size. |
API
| Attribute | Values | Description |
|---|---|---|
aria-current | page | On a link: accent colour and an edge along its top. Any value works. |
Accessibility
- These are links in a
<nav>, not ARIA tabs: don't addrole="tab". Mark the current one witharia-current="page". - The current item shows an edge as well as the accent, so it doesn't rely on colour.
- Keep the visible label; the icon is decorative next to it.