Updated
Navigation
Navigation is the bottom bar that moves people between the main sections of an app. Two to five destinations in a floating pill, one of them active.
Updated
Preview
The bottom tab bar, and the only persistent navigation in the app. Two to five destinations, always the same set, always in the same order. If a destination comes and goes, it does not belong here. The specimen is live, so pick one.
The bar is a pill, not a strip across the bottom of the screen. A 1px stroke is drawn outside it, so it costs no size, and under it sits dropShadow/lg, two shadows that lift the pill off whatever it floats over.
The icon is 24 and the label 12/16 Semi Bold, and the two measure 44 with their gap, centered in the 58. The active destination is the pill, a wash at radius full behind its icon and label. The file gives the switch no motion, so in the kit it changes on the tap; the stage above slides it.
How many tabs can Navigation hold?
Two to five, on one axis, and nothing changes but the arithmetic. The bar stays 340 by 62 and each destination takes an equal share of the 336 inside it.
Five is a real ceiling: 67.2 leaves about eight characters at 12 Semi Bold before the label truncates. At two, a Segmented Control is usually the better answer, since a bar that only ever holds two destinations spends the whole bottom of the screen on one choice.
Active and badge
The label behind every destination is a private component with one axis and three properties. Active is a fill and two colors. Badge is a dot.
The dot sits flush with the icon's top right corner, so it never widens the destination. It carries no count and says only that something is waiting.
It is the Badge component at Type Dot. The label component ships with Badge true, and all four published bar variants set it false.
How does Navigation differ on iOS and Material 3?
Appetite UI Navigation is a floating pill like the iOS tab bar. Material 3 draws a full width bar at 80 high with a different item count.
| Appetite UI component | iOS counterpart | Material 3 counterpart | What differs |
|---|---|---|---|
| Navigation, 340 x 62 pill, Tabs 2 to 5 | iOS / Tab Bar, a floating capsule 62 high, two to five tabs | M3 / Navigation bar, 412 x 80, three to five items | Material is a full width bar with a separate 24 high Gesture Navigation component. Appetite UI and iOS float on the content, and Appetite UI allows two tabs where Material starts at three |
| Active pill, brand label and icon | Selected tab on a capsule fill | Active indicator behind the icon | Appetite UI draws the pill behind both icon and label |
The minimum touch target is 44 on iOS and 48 on Android, from platform/min-touch-target. A destination is 58 high and at least 67.2 wide, so every tab clears both.
See Platform Bridge and the Material 3 page.
Properties
One axis on the published bar. Everything else lives on the private label inside it.
| Property | Type | Default |
|---|---|---|
Tabs | 2, 3, 4, 5 | 2 |
Active | False, True, on the label | False |
Label | Text, on the label | Title |
Icon Swap | Instance swap, on the label | circle |
Badge | Boolean, on the label | true |
The bar has four variants and the label two. Set Active on exactly one destination: the component lets you light two, and a bar with two active tabs tells nobody where they are.
There is no Disabled and no Pressed on the bar, so a destination that is unavailable should not be in it at all.
Tokens
Every value the bar and its labels read, resolved to their primitive.
| Token | Light | Dark | Applied to |
|---|---|---|---|
bg/white-0 | #FFFFFF | #0E0E0F | Bar surface |
border/soft-100 | #E9E9EA | #2F2F31 | 1px outside stroke |
brand/base | #155DFC | #2B7FFF | Active icon and label |
text/soft-500 | #8E8E93 | #AEAEB2 | Inactive label |
fg/soft-500 | #8E8E93 | #AEAEB2 | Inactive icon |
state/error/base-500 | #FB2C36 | #FB2C36 | Badge dot |
colors/alpha/gray/alpha-10 | #6A7282 at 10% | #6A7282 at 10% | Active pill, one value both modes |
The active pill is a single mode value, so it stays #6A7282 at 10 percent in dark, a faint light wash on a #0E0E0F bar. The icon and label carry the state as well, and the pill is the signal that reads first.
In light mode an inactive label is #8E8E93 on white, a contrast of 3.26:1 and a documented product choice, under the 4.5:1 that WCAG asks of small text. Keep labels short and let the icon say the rest.
In code, give each tab a visible focus ring, mark the active one as current for VoiceOver and TalkBack, and describe the badge dot in words, since the dot carries no text.
Geometry runs on dimensions/radius/full, dimensions/spacing/0-5 2 around the row, dimensions/spacing/1-5 6 above and below each destination and dimensions/spacing/1 4 between icon and label. The shadows are the effect styles dropShadow/lg on the bar and dropShadow/xs on the dot.
Guidelines
Do
Name the place, not the action. A tab bar switches destinations, so Home, Search and Inbox are nouns a user can point at.
Don't
Do not put a verb in the bar, and do not write a label the width cannot hold. Create new document is an action, and it truncates.
Keep the set fixed. A tab that appears only sometimes teaches the user that the bottom of the screen cannot be trusted, and the value of a persistent bar is that the same thing is always in the same place.
If the destination count changes with the account type, pick the larger set and disable nothing, or build the smaller product a smaller bar.