Usage
Use the navigation toolbar on surfaces where people need a small set of actions within easy reach. Not every screen has one. When a screen's actions belong to its content, or there are no recurring actions to hold, it does without.
A toolbar holds between one and five actions. Five is the maximum because the buttons need to stay far enough apart to be tapped accurately, and a sixth would crowd them. Actions spread evenly across the width, so a toolbar with three sits differently than one with five, and both stay anchored to the same left and right edges.
- Choose the actions people need most on that particular surface.
- Keep a shared action in a consistent position across surfaces, so it can be found by memory.
- Use the toolbar for actions that belong to the page content rather than to the surface itself.
- Change the action set within a single surface, since the toolbar should be predictable once someone is there.
- Add a toolbar to a screen with nothing recurring to put in it, because an almost-empty toolbar takes space without earning it.
Behavior and interaction
Positioning
On screens that use a toolbar, it's sticky to the bottom. It stays in place while the page scrolls, so the actions are always reachable.
Changelog
|
Date |
Version |
Notes |
|---|---|---|
|
Sept 10, 2026 |
1.0.0 |
Initial draft of component guidance |