---
url: /foundations/layout/scaffold/rails.md
description: >-
  A fundamental UI design structure that provides a standard platform for
  assembling key components
---

# Scaffold

A fundamental UI design structure that provides a standard platform for assembling key components

[Overview](overview.md) · [Bars](bars.md) · **Rails** · [Panes](panes.md)

## Rails

Rails are the next level in layout after bars, filling the perimeter space surrounding panes or floating above them.

![Rail regions highlighted, a bottom toolbar on mobile, and a leading and trailing rail on desktop.](/assets/04a20751-mp3nmktk-01.DNVo_W3T.webp)

Rails occupy the spaces immediately adjacent to bars:

1. A toolbar sits above the navigation bar
2. A navigation rail and companion rail occupy the leading and trailing sides of a large window

On compact screens, the top and bottom rail regions can be used for components like:

* [Toolbars](../../../components/toolbars/overview.md "Toolbars display frequently used actions relevant to the current page.")
* Chat inputs
* [FABs](../../../components/floating-action-button/overview.md "Floating action buttons (FABs) help people take primary actions.")
* Other primary controls related to an individual screen

![A mobile photo app highlighting a toolbar above a navigation bar.](/assets/d79c6387-mp3nowjr-02.BAwvvJ3q.webp)

1. On mobile, a toolbar can float in the rail region

On larger screens, there are rails on the sides of the screen (as well as top and bottom). The leading side rail region commonly holds the [navigation rail](../../../components/navigation-rail/overview.md "Navigation rails let people switch between UI views on mid-sized devices.").

![A photo app on desktop, highlighting an expanded navigation rail.](/assets/960bcf08-mp3thuiz-03.Bz2xTUfl.webp)

At larger breakpoints, the leading rail region can be occupied by an expanded navigation rail

The rail region on the trailing side of a large screen can hold supporting controls or actions that modify or relate to the content in a pane.

![A photo app on desktop, highlighting a trailing vertical toolbar.](/assets/09968e70-mp3nu4r2-04.1e_47Qj7.webp)

The rail region can also be occupied by a vertical toolbar or other controls

In [XR](../../xr/design/overview.md), rail components can become [orbiters](https://developer.android.com/design/ui/xr/guides/spatial-ui#orbiters), which float outside the visible content area.

![A photo app in immersive XR, with a navigation rail floating outside the pane.](/assets/9500ccc1-mp3nvyg3-05.D2SL7UtN.webp)

In full space, an XR navigation rail can float outside the main content as an orbiter