Navigation
Navigation is the bottom bar that moves people between the main sections of an app.
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.
A pill, not a bar across the screen bottom. The 1px stroke is drawn outside, so it costs no size, and under it sits dropShadow/sm, two shadows that lift the pill off whatever it floats over. The icon is 24, the label 12/16 Semi Bold, and the two measure 44 with their gap, centred in the 58. The active pill travels rather than jumps: motion/toggle/state, duration/fast 120 with easing/standard. The bar itself carries no motion in the file, so that preset stands in, since it is the file's own answer for a control changing state.
Tabs
One axis, four counts, 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 colours. Badge is a dot.
The dot sits flush with the icon's top right corner rather than hanging off it, so it never widens the destination. It carries no count. This is the Badge component at Type Dot: something is waiting, nothing about how much. The label component ships with Badge true, and all four published bar variants set it false.
Properties
One axis on the published bar. Everything else lives on the private label inside it.
Four variants on the bar, two on the label. Set Active on exactly one destination: the component will happily light two, and nothing in the file stops you. The bar has no Disabled and no Pressed, so a destination that is unavailable should not be in the bar at all.
Tokens
Every value the bar and its labels read, resolved to their primitive.
The active pill is a Foundations primitive with a single mode, so it stays #6A7282 at 10 percent in dark, a faint light wash on a #0E0E0F bar rather than a value chosen for that ground. The icon and label carry the state as well, so the pill is not the only signal, but it is the one that reads first. Geometry runs on radius/full, spacing/2 8 and spacing/1 4, with the shadows on the effect styles dropShadow/sm and dropShadow/xs.
Guidelines
Name the place, not the action. A tab bar switches destinations, so Home, Search and Inbox are nouns a user can point at.
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 whole 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: build the smaller product a smaller bar.