Toolbar
A toolbar is a bar of actions for the current view, placed at the bottom or top edge. iOS calls it a Toolbar and Material 3 has the bottom app bar, which can carry a floating action button.
Why it matters
A toolbar puts the common actions of a view in one place. Apple’s warning is overcrowding: people must be able to tell the items apart and hit each one, so the rest goes into a menu.
Toolbar on iOS and Android
Also called Bottom app bar, Action bar. The same idea in each system, with the values Appetite UI gives it.
| Value | iOS | Android | Appetite UI |
|---|---|---|---|
| Name | Toolbar | Bottom app bar | Toolbar |
| Tab bar height | 49 pt | 64 dp | platform/ |
| Items in the file | Groups of two to five icons on glass | Bottom app bar, not drawn in the file | See below |
| Height and elevation (Material Components) | Set by the system | 80 dp minimum height, 3 dp elevation | See below |
In Appetite UI
Toolbar is 340 by 62 with two to four actions, flat with a top hairline and square corners, where iOS floats the actions on glass. The kit’s primary action is 44 and sits inside the bar, in the place of the Material floating action button.
Example
A mail view has a toolbar with Reply, Archive, Delete and More. The less common commands move into the More menu, so the four stay easy to hit.
Common mistakes
- Filling the bar to the edges. Keep to a few items and move the rest into a menu.
- Adding an overflow menu by hand where the system adds one.
- Mixing icon-only and text items without need.
- Putting a floating action button over the bar on iOS.
Questions
What is the difference between a toolbar and a tab bar?
A tab bar moves between destinations of the app. A toolbar holds actions on the current view. They can both sit at the bottom of the screen.
What is the Material 3 equivalent of the iOS toolbar?
The bottom app bar, which holds actions and can carry a floating action button. In Material Components for Android it is 80 dp high.
Sources
The pages the facts above rest on, each read October 30, 2026.