---
url: /foundations/xr/components/app-bars.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** · [Dialogs](dialogs.md) · [Nav bar](nav-bar.md) · [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 app bar with custom specs and guidance. See [XR developer documentation](https://developer.android.com/design/ui/xr/guides/foundations) for more details.
## Variants & configurations
There is one app bar [orbiter](https://developer.android.com/design/ui/xr/guides/spatial-ui#orbiters "Orbiters are floating elements that control the content within spatial panels."). It closely aligns with the [small app bar](../../../components/app-bars/overview.md "Small app bars display information and actions in compact layouts. They're often used for scrolled views on subpages that require back navigation and multiple actions."). It can be configured to be center-aligned or left-aligned.
1. Center-aligned app bar
2. Left-aligned app bar
## Anatomy
1. Container
2. Headline
3. Trailing icons
4. Leading icon
## Color & elevation
XR uses color to communicate the elevation of UI elements and orbiters. With [spatial elevation](https://developer.android.com/design/ui/xr/guides/spatial-ui#spatial-elevation), the app 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. Elevated app bars can use any of these color options:
1. Surface container
2. Surface container high
3. Surface container highest
## Measurements
Measurements and padding for app bar orbiters
## Usage
An app 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, this spatial capability is only available 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."). 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 app bar on the same plane as the body content to mimic a 2D experience.
An app bar’s behavior and placement changes from a 2D to a 3D experience
## Behavior
### Global context
When placed in global context, the orbiter is centered at the top of the app it controls.
It stays anchored to the app during layout or content changes.
This ensures navigation elements are always easy to find and use.
Global app bar orbiters should be centered and anchored to the top of the app
### Local context
When placed in local context, the orbiter is centered at the top of the spatial panel it controls.
It repositions in response to layout or content changes.
::: warning Caution
Local app bar orbiters should be centered and anchored to the top of the panel. However, this is less common, so make sure that it contains actions that only affect its anchored panel.
:::
### Additional app bars
In most cases, apps should only have one app bar orbiter, placed in global context.
::: warning Caution
Limit the use of multiple app bars to rare cases when additional spatialization improves usability
:::
## Placement
### Offset & inset positioning
In full space, an app bar orbiter can be positioned:
* Offset 20dp from the spatial panel
* Inset 12dp, overlapping spatial panel without obstructing content
::: tip Do
An app bar orbiter with a 20dp offset creates visual separation from the spatial panel
:::
::: danger Don't
Don’t overlap the app bar orbiter and spatial panel more than 12dp
:::
### Horizontal alignment
::: tip Do
Always align the app bar orbiter within the bounds of nearby spatial panels
:::
::: danger Don't
The app bar orbiter shouldn’t exceed the width of adjacent spatial panels
:::
### Spatial panel alignment
By default, app bar orbiters are center-aligned to the spatial panel. Their width and placement can be adjusted to accommodate specific user needs, such as improved ergonomics or [right-to-left (RTL) languages](../../layout/bidirectionality-rtl.md).
App bar orbiters can align to the center, left, or right of the spatial panel
### Width boundaries
An app bar orbiter’s width should adjust to stay in a person’s [field of view](https://developer.android.com/design/ui/xr/guides/spatial-ui#where-place).
This makes crucial navigation elements easy to find.
::: tip Do
Adjust the width of the app bar orbiter to fit in a person’s field of view
:::
It’s not recommended to increase the width of an app bar orbiter beyond a person’s natural [field of view](https://developer.android.com/design/ui/xr/guides/spatial-ui#where-place).
This creates a visual imbalance and makes it difficult to find navigation elements.
::: danger Don't
Avoid expanding the app bar orbiter beyond the adjacent panel’s width and a person’s field of view
:::
### Adaptable width
When placed in a local context, an app bar orbiter can expand to the width of its adjacent spatial panel.
Be sure the orbiter stays in a person’s field of view, and test for usability.
::: warning Caution
Use caution before expanding the app bar’s width to match its spatial panel. The orbiter may not fit in a person’s primary field of view.
:::
## Accessibility considerations
[XR accessibility](../design/accessibility.md) guidelines are still evolving. XR app bars should follow applicable Material [app bar accessibility standards](../../../components/app-bars/accessibility.md).