Navigation rail
A navigation rail is a vertical bar of top-level destinations at the edge of a medium or large screen. Material 3 has it in collapsed and expanded forms, and iOS moves the same job into a sidebar or a tab bar.
Why it matters
On a wider screen the bottom bar stretches across too much space. A rail keeps destinations at the edge, in reach of the hand.
The component changes with the window size, not with the device, so a design says at which width it switches.
Navigation rail on iOS and Android
Also called Side rail, Vertical tab bar. The same idea in each system, with the values Appetite UI gives it.
| Value | iOS | Android | Appetite UI |
|---|---|---|---|
| Name | Sidebar, or a tab bar that adapts to one | Navigation rail: collapsed and expanded | Duo control rail |
| Width (Material Components) | Set by the system sidebar | 80 dp container by default | See below |
| Rail in the file | 96 pt control rail on iPhone Duo | Not drawn | See below |
In Appetite UI
The kit draws a rail for iPhone Duo: a 96 pt control rail beside the content with vertical Toolbar and Tab Bar. It does not draw the Material rail.
Example
On a tablet in landscape the bottom bar becomes a rail of four icons with labels. At a larger window it expands to show the labels beside the icons.
Common mistakes
- Keeping a bottom bar on a wide window.
- More than a handful of destinations in a rail.
- Different order of destinations from the bar it replaces.
- Icons without labels.
Questions
How wide is a Material 3 navigation rail?
The container is 80 dp wide by default, in Material Components for Android.
Does iOS have a navigation rail?
Not under that name. A sidebar does the job on iPad, and Apple notes that a tab bar style exists that provides both.
Sources
The pages the facts above rest on, each read October 30, 2026.