The app bar & header component is a dedicated bar at the top of the app canvas that can be customized to display important app-related functions, such as branding, top-level navigation, and access to app controls.
Use consistent app bar & header layouts to place key controls, such as in-app search, in a standard location throughout the UI.
Anatomy
The app bar & header can include a variety of elements. It can be configured in either of these ways:
- App header: When configured as an app header, the component contains space for optional text, with minimal use of icons and buttons. Typically, it includes a screen title and back arrow.
- App bar: When configured as an app bar, it can include icons, tabs, and buttons. Typical elements include an app icon and navigational options.
Either of these versions may also include app controls, such as in-app search and settings.
![App bar & header anatomy](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-anatomy-1.png?authuser=9)
1. Back arrow
2. Screen title
3. Button
4. App controls
5. App icon
6. Primary navigation (tabs)
Specs – App bar
App bar with primary navigation – center aligned
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-8.png?authuser=9)
App bar with primary navigation – left aligned
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-7.png?authuser=9)
App bar with primary navigation – collapsed (drawer instead of tabs)
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-9.png?authuser=9)
Specs – App header
App header with centered title
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-1.png?authuser=9)
App header with single app control
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-2.png?authuser=9)
App header with multiple app controls
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-3.png?authuser=9)
App header with single button
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-4.png?authuser=9)
App header with multiple buttons
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-5.png?authuser=9)
App header with text overflow
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-6.png?authuser=9)
App header with standalone tab bar
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-10.png?authuser=9)
Customization
OEMs can reflect their brand by modifying the visual appearance of the app bar & header. Modifications might include:
- Custom icons
- Custom fonts
- Setting the appearance of active, inactive, and disabled buttons
- Setting button dimensions and placements
Design system provides guidance for customizing components using layout, color, typography, and sizing.
Examples
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-mock-1.png?authuser=9)
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-mock-2.png?authuser=9)
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-mock-3.png?authuser=9)
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-mock-4.png?authuser=9)