Bottom navigation
Ready
Moves between the main parts of a module.
Platforms Phone · TabletGroup NavigationUpdated 26 Oct 2026
When to use
- A module has three to five top-level parts that people move between all day.
- The parts are peers; none sits inside another.
When not to use
| If people need to | Use |
|---|
| Switch views inside one screen | Primary tabs |
| Go back from a detail screen | Top bar |
| A module with a single main screen | No bottom navigation |
Anatomy
- Active indicator · Turquoise light pill behind the icon
- Active label · Teal ink
- Icon · required, 24
- Label · required
Variants
| Variant | Purpose | Figma |
|---|
| Phone, five items | Icon over label; the active icon sits in a Turquoise light pill | Designed |
| Tablet, three items | Icon over label; the active icon sits in a white box | Designed |
| None | The module designer leaves it out when the module has one main screen | Designed |
States
| State | When | What changes | Figma |
|---|
| Active | The part on screen | Phone: Turquoise light pill, Teal ink label. Tablet: white box | Designed |
| Inactive | Other parts | No pill or box; Ink label on phone, Teal ink on tablet | Designed |
| Pressed | Finger is down | A 5% black pill behind the icon | Temporary rule |
Behaviour
- Shows on the top-level screens of a module and hides on detail and form screens.
- Tapping the active item again returns that part to its first screen.
- The add button floats above it, never on it.
Phone and tablet
| Phone | Tablet |
|---|
| Items | 5 | 3 |
| Height | 80 | 97 |
| Active mark | Pill 64 × 32, corners 16, Turquoise light | White box, corners 8, padding 8 |
| Labels | 12 Medium | 14 Regular, Teal ink |
| Item width | Equal shares | 150 each, gap 8, centred |
Content
| Part | Rule |
|---|
| Label | One word, sentence case, the name of the part |
| Icon | Outlined Material Symbols Rounded glyph that matches the label |
Do and don't
DoGive every item an icon and a one-word label.
Don'tDrop the labels and leave icons to explain themselves.
Specs
Click a value to copy it.
| Part | Property | Phone | Tablet |
|---|
| Bar | Height | | |
| Fill | | |
| Padding | | |
| Gap | | |
| Item | Padding | | |
| Icon to label | | |
| Width | | |
| Icon | Size | | |
| Colour | | |
| Active indicator | Shape | | |
| Fill | | |
| Label | Type | | |
| Colour | | |
Accessibility
- Announced as navigation; the active item is marked as the current page.
- Each item is at least 64 wide and the full bar height tall.
- Teal ink on Turquoise light scores 6.9; Ink on Page light scores 7.1.
- The active item is marked by shape (pill or box) as well as colour.
Changes
| Date | Change |
|---|
| 26 Oct 2026 | Phone five-item and tablet three-item bars recorded; each module designer decides whether to use one. |