# 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.

Page: https://www.appetiteui.com/glossary/navigation-rail. Navigation rail: Material 3 rail and the iOS equivalent. Also called Side rail, Vertical 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.

## iOS and Android

|  | iOS | Android (Material 3) | 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

1. [Material Components for Android: Navigation rail](https://github.com/material-components/material-components-android/blob/master/docs/components/NavigationRail.md)
2. [Apple Human Interface Guidelines: Sidebars](https://developer.apple.com/design/human-interface-guidelines/sidebars)

## Related

- Docs: [iOS](https://www.appetiteui.com/docs/ios)
- Docs: [Navigation](https://www.appetiteui.com/docs/navigation)
- Article: [How to design for iPhone Duo in Figma](https://www.appetiteui.com/blog/design-for-iphone-duo-in-figma)
- Glossary: [Tab bar](https://www.appetiteui.com/glossary/tab-bar)
- Glossary: [Sidebar](https://www.appetiteui.com/glossary/sidebar)
- Glossary: [Size classes](https://www.appetiteui.com/glossary/size-classes)