# App bar & header

<br />

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.

> [!NOTE]
> **Note:** The app bar \& header component is part of the Car UI Library, where it is implemented as "toolbar." To use the app bar \& header, you must [add the Car UI Library as a dependency](https://source.android.com/devices/automotive/hmi/car_ui/integrate) to your app.

*** ** * ** ***

## 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](https://developers.google.com/cars/design/automotive-os/components/tabs), and [buttons](https://developers.google.com/cars/design/automotive-os/components/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.com/cars/design/automotive-os/components/images/app-bar-anatomy-1.png) Two versions of an app header (top and middle) and one version of an app bar (bottom), featuring the following elements:  
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.com/cars/design/automotive-os/components/images/app-bar-spec-8.png)

### App bar with primary navigation -- left aligned

![](https://developers.google.com/cars/design/automotive-os/components/images/app-bar-spec-7.png)

### App bar with primary navigation -- collapsed (drawer instead of tabs)

![](https://developers.google.com/cars/design/automotive-os/components/images/app-bar-spec-9.png)

*** ** * ** ***

## Specs -- App header

### App header with centered title

![](https://developers.google.com/cars/design/automotive-os/components/images/app-bar-spec-1.png)

### App header with single app control

![](https://developers.google.com/cars/design/automotive-os/components/images/app-bar-spec-2.png)

### App header with multiple app controls

![](https://developers.google.com/cars/design/automotive-os/components/images/app-bar-spec-3.png)

### App header with single button

![](https://developers.google.com/cars/design/automotive-os/components/images/app-bar-spec-4.png)

### App header with multiple buttons

![](https://developers.google.com/cars/design/automotive-os/components/images/app-bar-spec-5.png)

### App header with text overflow

![](https://developers.google.com/cars/design/automotive-os/components/images/app-bar-spec-6.png)

### App header with standalone tab bar

![](https://developers.google.com/cars/design/automotive-os/components/images/app-bar-spec-10.png)

*** ** * ** ***

## 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

> [!NOTE]
> **Note:** To customize the app bar \& header, which is an implementation of the Car UI library toolbar, OEMs must use runtime overlays. Runtime overlays are explained in the [Car UI Library Integration Guide](https://source.android.com/devices/automotive/hmi/car_ui).

[Design system](https://developers.google.com/cars/design/automotive-os/design-system/overview) provides guidance for customizing components using layout, color, typography, and sizing.

*** ** * ** ***

## Examples

![](https://developers.google.com/cars/design/automotive-os/components/images/app-bar-mock-1.png) App header in sign-in ![](https://developers.google.com/cars/design/automotive-os/components/images/app-bar-mock-2.png) App header in playback ![](https://developers.google.com/cars/design/automotive-os/components/images/app-bar-mock-3.png) App bar ![](https://developers.google.com/cars/design/automotive-os/components/images/app-bar-mock-4.png) App bar when content is scrolled