App bars: bottom

A bottom app bar displays navigation and key actions at the bottom of mobile screens.


Usage

Bottom app bars provide access to a bottom navigation drawer and up to four actions, including the floating action button.

Principles

Bottom app bars are actionable, flexible, and ergonomic.

Read More

Actionable

Bottom app bars highlight important screen actions and raise awareness of the floating action button.

Flexible

A bottom app bar’s layout and actions change based on the needs of the screen.

Ergonomic

The bottom app bar is easy to reach from a handheld position on a mobile device.

When to use

Bottom app bars should be used for: Bottom app bars shouldn’t be used for:

Read More

Bottom app bars should be used for:

  • Mobile devices only
  • Access to a bottom navigation drawer
  • Screens with two to five actions

Bottom app bars shouldn’t be used for:

  • Apps with a bottom navigation bar
  • Screens with one or no actions

Do.

Use a bottom app bar to provide convenient access to actions.

Don’t.

Don’t use a bottom app bar on screens with one or no actions (other than a FAB).


Anatomy

Bottom app bars can contain actions that apply to the context of the current screen. They include a navigation menu control on the far left and a floating action button (when one is present). If included in a bottom app bar, an overflow menu control is placed at the end of other actions.

  1. Container

  2. Navigation drawer control

  3. Floating action button (FAB)

  4. Action icon

  5. Overflow menu control

Positioning

Bottom app bars have three different layouts based on the presence of a FAB and its position in the bar. These layouts dictate the number...

Read More

Bottom app bars have three different layouts based on the presence of a FAB and its position in the bar. These layouts dictate the number of actions that can be included in the bar.

Centered FAB

Do.

Use bottom app bars on home screens that feature a navigation menu control and a prominent action (such as a FAB). A minimum of one and a maximum of two additional actions can be placed on the opposite side of the bar.

End FAB

Do.

Use a FAB on secondary screens that require a floating action button and three to four additional actions.

No FAB

Do.

When no floating action button is needed, the bottom app bar can accommodate a navigation menu icon and up to four actions aligned on the opposing edge.

Landscape

Do.

In landscape orientation, actions remain aligned to screen edges for easy handheld access

Floating Action Button

When present, floating action buttons (FABs) are displayed on bottom app bars in one of two ways: Use an inset to increase the visual prominence...

Read More

When present, floating action buttons (FABs) are displayed on bottom app bars in one of two ways:

  1. Overlap: The FAB is at a higher elevation than the bottom app bar, and has no effect on the bar’s shape.
  2. Inset: The FAB is at the same elevation as the bottom app bar, and the bar shape transforms to let the FAB dock in a notch carved into the bottom app bar.

Use an inset to increase the visual prominence of a FAB or accentuate customized element shapes. Refer to the Theming section for more guidance on inset FAB’s in a bottom app bar.

Overlapping FAB

Inset FAB

Don’t.

Do not place a FAB outside of a bottom app bar, as it makes it harder to reach.


Behavior

Layout

To support the intent of different sections of an app, the layout and actions of a bottom app bar can be changed to suit each...

Read More

To support the intent of different sections of an app, the layout and actions of a bottom app bar can be changed to suit each screen.

For example, screens can display more or fewer actions according to what suits the screen content best.

To showcase a primary action, this bottom app bar uses the centered FAB layout on its home screen. When viewing a message, the bottom app bar layout changes to the “End FAB” layout to accommodate additional contextual actions.

Scrolling

Upon scroll, the bottom app bar can appear and disappear.

Read More

Upon scroll, the bottom app bar can appear or disappear:

  • Scrolling downward hides the bottom app bar. If a FAB is present, it detaches from the bar and remains on screen.
  • Scrolling upward reveals the bottom app bar, and reattaches to a FAB if one is present.

A bottom app bar can contain a shape, such as a notch, along its edge to accommodate the FAB. As the bar detaches from the FAB, the bar returns to its default shape. Upon returning to the screen and reattaching to the FAB, the bar regains its notched shape.

A FAB can remain on screen, even as a bottom app bar hides when scrolled off-screen.

Elevation

The bottom app bar has an elevation of 8dp. When paired with a FAB, the FAB’s resting and raised heights should be increased to remain...

Read More

The bottom app bar has an elevation of 8dp. When paired with a FAB, the FAB’s resting and raised heights should be increased to remain visible above the bottom app bar.

  1. Content (0dp)
  2. Snackbar (6dp)
  3. Bottom app bar (8dp)
  4. Floating action button (12dp resting)
  5. Bottom navigation drawer (16dp)

Menus that are generated by the bottom app bar (such as a bottom navigation drawer or overflow menu) open as bottom sheets at a higher elevation than the bar.

This bottom navigation drawer opens from a bottom app bar. The drawer opens in front of the bottom app bar, and displays a top app bar to close the drawer when it reaches full height.

Elements that cover the bottom app bar

The bottom app bar can be covered by keyboards and other temporary surfaces. If your app requires frequent obstruction of the bar, another component should be used instead.

Do.

A keyboard can temporarily cover a bottom app bar.

Don’t.

Don’t attach a bottom app bar to the top of the keyboard.

Placement

A bottom app bar can display a navigation menu icon to open a bottom navigation drawer, but the bar doesn’t contain any navigation actions itself...

Read More

Navigation

A bottom app bar can display a navigation menu icon to open a bottom navigation drawer, but the bar doesn’t contain any navigation actions itself (such as Up navigation to a home screen or a close icon). App navigation should be placed in another component such as a top app bar, or embedded on-screen.

Do.

Provide navigation outside of a bottom app bar that allows users to return to the previous app screen.

Don’t.

Don’t place navigation actions in a bottom app bar, as they can be covered by temporary surfaces.

Pairing with a top app bar

When used with a bottom app bar, top app bars can provide upwards navigation and additional actions. Throughout an app, actions should be organized and divided consistently across both bars.

The following items benefit from specific placement:

  • Place a single navigation menu control in a bottom app bar (for reachability)
  • Place a single overflow menu control as the trailing action
  • Place actions, like Search, in a consistent location throughout the app
  • Place destructive actions, such as “Delete,” in the top app bar

Do.

Use a top app bar as a container for upwards navigation on secondary screens.

Don’t.

On a home screen, don’t place a navigation menu control in both a top and bottom app bar. Only one app bar should have this control.

Do.

Place an overflow menu as the last action between the app bars.

Do.

A bottom app bar can provide consistent access to actions, such as navigation and search, allowing the top app bar to hold contextual, screen-specific actions.

Snackbars

To avoid obstruction, snackbars and toasts should animate in place vertically above a bottom app bar. Refer to Snackbars for more guidance on its layout and positioning.

Do.

Inset a snackbar or toast above a bottom app bar and FAB.

Don’t.

Don’t place a snackbar in front of a bottom app bar or FAB.


Theming

Posivibes Material Theme

This social media app’s bottom app bar has been customized using Material Theming. Areas of customization include color and shape. The Material Design color system...

Read More

This social media app’s bottom app bar has been customized using Material Theming. Areas of customization include color and shape.

Posivibe’s customized bottom app bar

Color

Posivibe’s bottom app bar uses custom color on two elements: the container and icons.

Element

Category

Attribute

Value

Container

Surface

Color

Opacity

#FFFFFF

100%

Icons

On Surface

Color

Opacity

#000000

100%

Shape

Posivibe’s bottom app bar uses a custom shape on the top edge of the container.

Element

Attribute

Value

Container

Top edge

TriangleEdge SVG

Path data: “l 42 42 l 42 -42"

For further path syntax guidance, see https://www.w3.org/TR/SVG/paths.html.


Specs

Mobile portrait

Bottom app bars are a mobile-only component and are not applicable for tablet or desktop use. Minimum 1, maximum of 2 actions aligned to opposite...

Read More

Bottom app bars are a mobile-only component and are not applicable for tablet or desktop use.

Minimum 1, maximum of 2 actions aligned to opposite edge of navigation menu

FAB Center

  • Measurement 56
  • Measurement 16
  • Measurement 16
  • Measurement 24
  • Measurement 16
  • Measurement 16
  • Measurement 24
  • Measurement 56

FAB Center cut

  • Measurement 16
  • Measurement 16
  • Measurement 24
  • Measurement 16
  • Measurement 16
  • Measurement 56
  • Measurement 24
  • Measurement 8
  • 5656

FAB End

Minimum 2, maximum of 4 actions aligned to opposite edge of the FAB

  • Measurement 56
  • Measurement 24
  • Measurement 16
  • Measurement 24
  • Measurement 24
  • Measurement 24
  • Measurement 16
  • Measurement 16
  • Measurement 16
  • Measurement 28
  • 5656

No FAB

Minimum 2, maximum of 4 actions aligned on opposite edge of navigation menu

  • Measurement 56

Mobile landscape

Bottom app bars are a mobile-only component and are not applicable for tablet or desktop use. Minimum 1, maximum of 2 actions aligned to opposite...

Read More

Bottom app bars are a mobile-only component and are not applicable for tablet or desktop use.

Minimum 1, maximum of 2 actions aligned to opposite edge of navigation menu

  • Measurement 48
  • Measurement 24
  • Measurement 16
  • Measurement 16
  • Measurement 24
  • Measurement 12
  • Measurement 12
  • 5656

Implementation

Bottom app bar implementation support for each platform is indicated below.

Android Material Component

Status: Code Available

iOS Material Component

Status: Code Available

Flutter Material Component

Status: Code Available