---
url: /foundations/xr/components/nav-rail.md
description: Learn how Material 3 Expressive components adapt to extended reality devices
---

# XR components

Learn how Material 3 Expressive components adapt to extended reality devices

[Overview](overview.md) · [App bars](app-bars.md) · [Dialogs](dialogs.md) · [Nav bar](nav-bar.md) · **Nav rail** · [Toolbars](toolbars.md)

::: info Note
XR guidelines are primarily intended for designers. Find what’s implemented in code in the [design kit](https://www.figma.com/community/file/1035203688168086460).
:::

Extended reality (XR) interfaces have special design requirements, like showing apps in 3D space. Material has an XR navigation rail with custom specs and guidance. See [XR developer documentation](http://developer.android.com/design/ui/xr/guides/foundations) for more details.

## Variants

There are two variants of navigation rail [orbiters](https://developer.android.com/design/ui/xr/guides/spatial-ui#orbiters "Orbiters are floating elements that control the content within spatial panels."): the contained FAB and spatialized FAB navigation rails.

![Navigation bar orbiters with a contained FAB and a spatialized FAB.](/assets/97631b2b-mp5sirou-01-3p.REjQ1-1e.webp)

1. Contained FAB rail
2. Spatialized FAB rail

## Anatomy

![Diagram of navigation rail orbiter identifying 9 internal elements of the component.](/assets/6a07b773-mp5sjxq7-02-3p.DrhWGWr9.webp)

1. Container
2. Active indicator
3. Large badge (optional)
4. Badge (optional)
5. Large badge label (optional)
6. Label text
7. Icon
8. Embedded or spatialized FAB (optional)
9. Menu icon (optional)

## Color & elevation

On XR, color is used to highlight elevated UI elements and orbiters. With [spatial elevation](https://developer.android.com/design/ui/xr/guides/spatial-ui#spatial-elevation), the navigation bar displays above the [spatial panel](https://developer.android.com/design/ui/xr/guides/spatial-ui#spatial-panels), on the Z-axis. Color communicates elevation on UI elements and orbiters. Elevated nav rails can use any of these color options:

![4 versions of elevation color strategy.](/assets/59cf5316-mp5smtp2-03-3p.BDp5cK97.webp)

1. Surface container with tertiary FAB
2. Surface container high with tertiary fixed dim FAB
3. Surface container highest with tertiary fixed dim FAB
4. Tertiary container with primary FAB

## Measurements

![Measurements and padding for navigation rail orbiter with contained FAB.](/assets/29f2762e-mp5sl333-04-3p.CsVAh3QX.webp)

Navigation rail orbiter padding and measurements with contained FAB

![Measurements and padding for navigation rail orbiter with spatialized FAB.](/assets/95c5ec06-mp5slo7l-05-3p.CYL9Umd9.webp)

Navigation rail orbiter padding and measurements with spatialized FAB

## Usage

In [full space](https://developer.android.com/design/ui/xr/guides/foundations#modes "Full space is Android XR’s immersive mode and supports spatial components."), a navigation rail can appear in an orbiter for a more immersive experience. Currently, spatial capabilities, such as [orbiters](https://developer.android.com/design/ui/xr/guides/spatial-ui#orbiters "Orbiters are floating elements that control the content within spatial panels."), are only available in full space. In [home space](https://developer.android.com/design/ui/xr/guides/foundations#modes "Home space is compatible with mobile and large screen apps, but doesn’t support spatial components."), use a regular navigation rail on the same plane as the body content to mimic a 2D experience.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fmoxcb5no-navrail_01.mp4?alt=media" aria-label="Interface showcasing navigation rail behavior and placement when transitioning from a 2D to 3D experience."></video>

Navigation rail orbiter behavior and placement changing when going from a 2D to a 3D experience

## Behavior

### Global context

Intended for global navigation, a nav rail orbiter should be centered along the left or right edge of the app it controls. It stays anchored to the app during layout or content changes to ensure controls are easy to find.

::: tip Do
<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fma4acdxe-XR_Nav-Rail_Behavior_01_V02.mp4?alt=media" aria-label="A navigation rail orbiter placed in global context."></video>

A navigation rail orbiter should be placed in global context, centered and anchored to the left or right of the app
:::

### Local context

Don’t place a navigation rail orbiter in local context or [between spatial panels](#d965ae72-bd1b-45a9-b4d3-d1d542e72087). Local placement can make controls hard to find. Nav rails are designed for app-level navigation, so should only use the global context.

::: danger Don't
<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fma4acsak-XR_Nav-Rail_Behavior_02_V02.mp4?alt=media" aria-label="A navigation rail orbiter placed in local context."></video>

Avoid placing a navigation rail orbiter in local context. It can be hard to find if placed between two spatial panels.
:::

## Placement

### Navigation context

The position of the navigation rail orbiter should communicate its navigational context:

* Use [**offset positioning**](https://developer.android.com/design/ui/xr/guides/spatial-ui#orbiters "Offset positioning is when orbiters are placed adjacent to spatial panels without overlap.") for global actions that affect the overall app experience
* Use [**inset positioning**](https://developer.android.com/design/ui/xr/guides/spatial-ui#orbiters "Inset positioning is when orbiters overlap with spatial panels.") for local actions that are specific to a spatial panel

A navigation rail orbiter can either overlap or be positioned adjacent to spatial panels with a 20dp margin for visual separation.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fmoxck8bj-navrail_02.mp4?alt=media" aria-label="Navigation rail orbiter offset and inset positioning."></video>

Position the navigation rail orbiter to reflect context: offset for global actions, inset for spatial panel-specific actions

### Inset positioning

Don’t obstruct content. To ensure a balanced and uncluttered layout, a navigation rail orbiter should overlap spatial panels by 12dp and no more than half their width.

::: danger Don't
<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fmoxcmy1y-navrail_03.mp4?alt=media" aria-label="Nav rail orbiter overlapping content by more than half its width."></video>

Avoid overlapping an inset navigation rail orbiter by more than half its width
:::

### Vertical alignment

A navigation rail orbiter can be aligned to the top, middle, or center of spatialized panels, providing different levels of visual prominence and accessibility.<br><br>Align the navigation rail orbiter based on the specific design and user experience goals for the application.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fmoxcqi3i-navrail_04.mp4?alt=media" aria-label="Nav rail orbiter positioning moving from the top, to middle, to center of spatialized panels."></video>

Align the navigation rail orbiter at the top or center of spatialized panels

The navigation rail orbiter placement shouldn't exceed the height of adjacent spatial panels.

::: danger Don't
<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fmoxd1s5j-navrail_05.mp4?alt=media" aria-label="A nav rail orbiter positioning above its spatial panel."></video>

The navigation rail orbiter shouldn’t exceed the height of the spatial panel
:::

<a id="d965ae72-bd1b-45a9-b4d3-d1d542e72087"></a>

### Spatial panel alignment

Avoid placing a navigation rail orbiter between spatial panels. This negatively affects the interface structure.

Navigation rail placement can be adjusted to accommodate specific needs, such as improved ergonomics or [right-to-left (RTL) languages](../../layout/bidirectionality-rtl.md).<br><br>For layouts that span more than two spatial panels, consider using a [navigation bar orbiter](nav-bar.md).

::: danger Don't
<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fmoxdaai7-navrail_06.mp4?alt=media" aria-label="A nav rail orbiter incorrectly positioned between spatial panels."></video>

Don't place a navigation rail orbiter between spatial panels
:::

## Spatialized FAB

There are two variants of navigation rail orbiters with different FAB treatments:

* **Contained FAB rail:** A contained FAB within the rail. This offers a compact and familiar layout.
* **Spatialized FAB rail:** The FAB becomes an orbiter of its own and is placed outside the navigation rail orbiter. Use this for higher emphasis and a distinct spatial effect.

Use the spatialized FAB rail to emphasize key actions and leverage XR hierarchy. Use the contained FAB rail to be more subtle, and align the experience with the baseline navigation bar.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fmoxd8z8l-navrail_07.mp4?alt=media" aria-label="Interface showing the difference between a navigation rail orbiter with a contained FAB and spatialized FAB."></video>

Choose between a navigation rail orbiter with a contained FAB or a spatialized FAB

To maintain visual association, place the spatialized FAB in close proximity to the navigation rail orbiter. Material recommends a 20dp margin.<br><br>The spatialized FAB can be placed above or below the navigation rail orbiter.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fmoxdgsuy-navrail_08.mp4?alt=media" aria-label="Spatialized FAB positioned close to the navigation rail orbiter."></video>

Position the spatialized FAB close to the navigation rail orbiter

While the spatialized FAB and navigation rail orbiter are typically positioned together, their placement is adaptable.

::: warning Caution
<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fm4cn0kcj-navrail_09.mp4?alt=media" aria-label="Spatialized FAB positioned with excessive spacing between itself and the navigation rail orbiter."></video>

Use caution when positioning spatialized FABs. Keep them within the height of adjacent spatial panels
:::

## Accessibility considerations

[XR accessibility](../design/accessibility.md) guidelines are still evolving. XR navigation rails should follow applicable Material [nav rail accessibility standards](../../../components/navigation-rail/accessibility.md).