---
url: /foundations/layout/scaffold/bars.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** · [Rails](rails.md) · [Panes](panes.md)

## Bars

Bars frame the screen to help people navigate through a product. They typically contain an [app bar](../../../components/app-bars/overview.md "App bars contain page navigation and information at the top of a screen.") or bottom [navigation bar](../../../components/navigation-bar/overview.md "Navigation bars let people switch between UI views on smaller devices.").

Bars can span a single pane or across the full width of a window.

![Navigation bar on mobile and app bar on desktop.](/assets/b52e9d6d-mp3nck82-01.di30a1bu.webp)

1. A navigation bar occupies the bottom bar region on mobile
2. An app bar occupies the top bar region on the web

App bars are placed at the top of the screen to help people navigate, providing a title and 1–2 essential actions like search or back.

![A photo app with an app bar below the safety region and above a grid of photos.](/assets/7b7cc3c8-mp3nejq3-02.BUlTpoNG.webp)

1. The app bar sits at the top of the screen, outside of the safety region

Navigation bars let people switch between 3–5 primary UI views at [compact](../breakpoints/compact.md "Window widths smaller than 600dp, such as a phone in portrait orientation.") or [medium](../breakpoints/medium.md "Window widths from 600dp to 839dp, such as a tablet or foldable in portrait orientation.") breakpoints.

![A photo app with a navigation bar below a grid of photos.](/assets/b940a532-mp3ng1v5-03.gQSNIbGN.webp)

1. The navigation bar sits at the bottom of the screen, above the safety region

### Safety region

Bars are placed adjacent to the safety regions, which contain [system UI](https://developer.android.com/develop/ui/compose/system/system-bars) elements.

The safety region shouldn’t contain primary content.

![A photo app with a safety region above an app bar and grid of photos.](/assets/88d8a361-mp3nk11i-04.DxvZh5-N.webp)

1. The safety region—at the top and bottom edges of the screen on compact devices—protect system UI elements