---
url: /foundations/xr/components/nav-bar.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 rail](nav-rail.md) · [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 bar with custom specs and guidance. See [XR developer documentation](http://developer.android.com/design/ui/xr/guides/foundations) for more details.

## Anatomy

![Diagram of navigation bar orbiter identifying 7 internal elements of the component.](/assets/62ece315-mp5rw7th-01-3p.DfJvLnII.webp)

1. Container
2. Icon
3. Active indicator 
4. Small badge (optional)
5. Large badge (optional)
6. Large badge label (optional)
7. Label text

## Color & elevation

On XR, color is used to highlight elevated UI elements and [orbiters](https://developer.android.com/design/ui/xr/guides/spatial-ui#orbiters "Orbiters are floating elements that control the content within spatial panels."). 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 "In Android XR, a spatial panel is a container for UI elements, interactive components, and immersive content."), on the Z-axis. Color communicates elevation on UI elements and orbiters. Elevated nav bars can use any of these color options:

![4 versions of elevation color strategy.](/assets/0b684a89-mp5rwtar-02-3p.CBdKrfFT.webp)

1. Surface container
2. Surface container high
3. Surface container highest
4. Tertiary container

## Measurements

![Measurements and padding for navigation bar orbiter.](/assets/57f07ce3-mp5rxeyw-03-3p.BD7q-d9x.webp)

Navigation bar orbiter padding and measurements

## 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 bar can appear in an [orbiter](https://developer.android.com/design/ui/xr/guides/spatial-ui#orbiters "Orbiters are floating elements that control the content within spatial panels.") for a more immersive experience. Currently, spatial capabilities, such as orbiters, 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 bar 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%2Fm4cj01s5-navbar_01.mp4?alt=media" aria-label="Interface showcasing navigation bar behavior and placement when transitioning from a 2D to 3D experience."></video>

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

## Behavior

### Global context

When placed in global context, the navigation bar orbiter is centered at the bottom of the app it controls. It stays anchored to the app during layout or content changes. This ensures navigation elements are easy to find and use.

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

A navigation bar orbiter centered and anchored to the bottom of the app

### Local context

When placed in local context, the navigation bar orbiter is centered at the bottom of the spatial panel it controls. It repositions in response to layout or content changes.

::: warning Caution
<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fma4aas8k-XR_Nav-Bar_Behavior_02_V02.mp4?alt=media" aria-label="A navigation bar orbiter placed in local context."></video>

Use caution before placing a navigation bar in local context. If it contains navigation elements that affect the overall app, a navigation bar orbiter should be placed in global context.
:::

## Placement

### Navigation context

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

* Use **offset positioning** for global actions that affect the overall app experience
* Use **inset positioning** for local actions that are specific to a spatial panel

A navigation bar 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%2Fmoxalxwd-navbar_02.mp4?alt=media" aria-label="Navigation bar orbiter offset and inset positioning."></video>

Position the navigation bar 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 bar orbiter should overlap spatial panels by 12dp and no more than half their height.

::: danger Don't
<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fmoxaokg7-navbar_04.mp4?alt=media" aria-label="Navigation bar orbiter inset positioning beyond the 12dp recommendation."></video>

Avoid overlapping an inset a navigation bar orbiter by more than half its height
:::

### Horizontal alignment

The navigation bar orbiter placement shouldn't exceed the width of adjacent spatial panels.

::: danger Don't
<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fmoxaqxbc-navbar_05.mp4?alt=media" aria-label="Nav bar orbiter placement that exceeds the width of its spatial panel."></video>

The navigation bar orbiter shouldn’t exceed the width of the spatial panel
:::

### Spatial panel alignment

A navigation bar orbiter should always be placed at the bottom of a spatial panel and within the immediate field of view (FOV).

Their placement can be adjusted to accommodate specific needs, such as improved ergonomics or [right-to-left (RTL) languages](../../layout/bidirectionality-rtl.md).<br><br>Avoid placing the navigation bar orbiter at the top of a spatial panel, as this area is typically reserved for app bar orbiters or other critical UI elements.

::: danger Don't
<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fmoxaupni-navbar_06.mp4?alt=media" aria-label="Nav bar orbiter incorrectly placed above a spatial panel."></video>

Don't position a navigation bar orbiter at the top of a spatial panel. Position it at the bottom in the field of view to maintain usability and minimize interaction effort.
:::

## Accessibility considerations

XR navigation bars should follow applicable Material [nav bar accessibility standards](../../../components/navigation-bar/accessibility.md). [More on XR accessibility](../design/accessibility.md)