---
url: /components/toolbars/overview.md
description: Toolbars display frequently used actions relevant to the current page.
---

# Toolbars

Toolbars display frequently used actions relevant to the current page.

**Overview** · [Specs](specs.md) · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

![Toolbars](/assets/9649b7c4-mrokzcly-toolbar.4YN3QiF9.webp)

* Two expressive variants: **docked toolbar** and **floating toolbar**
* Use the vibrant color style for greater emphasis
* Can display a wide variety of control types, like buttons, icon buttons, and text fields
* Can be paired with FABs to emphasize certain actions
* Don’t show at the same time as a navigation bar

![2 variants of toolbars.](/assets/972482d5-m0aionfm-01.DoxULIDV.webp)

Configurations of floating toolbars

## Availability & resources

| Type | Resource | Status |
| --- | --- | --- |
| Design | [Design Kit (Figma)](https://www.figma.com/community/file/1035203688168086460) | Available |
| Implementation | [Jetpack Compose - Bottom app bar](https://developer.android.com/develop/ui/compose/components/app-bars#bottom) | Available |
| Implementation | [Jetpack Compose: Expressive - Docked toolbar](https://developer.android.com/reference/kotlin/androidx/compose/material3/FlexibleBottomAppBar.composable) | Available |
| Implementation | [Jetpack Compose: Expressive - Floating toolbar](https://developer.android.com/reference/kotlin/androidx/compose/material3/HorizontalFloatingToolbar.composable) | Available |
| Implementation | [Android Views (MDC-Android) - Bottom app bar](https://github.com/material-components/material-components-android/blob/master/docs/components/BottomAppBar.md) | Available |
| Implementation | [Android Views (MDC-Android): Expressive - Docked toolbar](https://github.com/material-components/material-components-android/blob/master/docs/components/DockedToolbar.md) | Available |
| Implementation | [Android Views (MDC-Android): Expressive - Floating toolbar](https://github.com/material-components/material-components-android/blob/master/docs/components/FloatingToolbar.md) | Available |
| Implementation | [Flutter - Bottom app bar](https://api.flutter.dev/flutter/material/BottomAppBar-class.html) | Available |
| Implementation | Web | Unavailable |

## M3 Expressive update

The **bottom app bar** is no longer recommended and should be replaced with the **docked toolbar**, which functions similarly, but is shorter and has more flexibility. The **floating toolbar** was created for more versatility, greater amounts of actions, and more variety in where it's placed. [More on GM3 Expressive](https://m3.material.io/blog/building-with-m3-expressive)

Variants and naming:

* Added **docked toolbar **to replace **bottom app bar**

  * Size: Shorter height
  * Color: Standard or vibrant
  * Flexibility: More layout and element options

* Added **floating toolbar** with the following configurations:

  * Layout: Horizontal or vertical
  * Color: Standard or vibrant
  * Flexibility: Can hold many elements and components. Can be paired with FAB.

* **Bottom app bar **is still available, but not recommended

![2 examples of toolbar variants.](/assets/e301f33e-m0aiswog-02.DPrgn1TH.webp)

1. Floating, vibrant color scheme and paired with FAB
2. Docked with embedded primary action instead of FAB

## Differences from M2

* Color: New color mappings and compatibility with dynamic color
* Elevation: No shadow
* Layout: Container height is taller and the FAB is now contained within the app bar container

![M2 bottom app bar.](/assets/ca8b1045-m0e7liab-2.DaSOikIQ.webp)

M2: Bottom app bar had higher elevation of 8dp and didn't contain the FAB

![M3 bottom app bar.](/assets/5c53a6f6-m0e7mh6v-3.DZj-vfcg.webp)

M3: Bottom app bar has new colors, a taller container, no elevation or shadow, and contains the FAB