Usage
Bottom app bars provide access to a bottom navigation drawer and up to four actions, including the floating action button.
Principles
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:
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
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.
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...
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
End FAB
No FAB
Landscape
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...
When present, floating action buttons (FABs) are displayed on bottom app bars in one of two ways:
- Overlap: The FAB is at a higher elevation than the bottom app bar, and has no effect on the bar’s shape.
- 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
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...
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.
Scrolling
Upon scroll, the bottom app bar can appear and disappear.
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.
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...
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.
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.
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.
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...
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.
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
Snackbars
To avoid obstruction, snackbars and toasts should animate in place vertically above a bottom app bar. Refer to
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...
This social media app's bottom app bar has been customized using Material Theming. Areas of customization include color and shape.
Color
Posivibes' 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
Posivibes' 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" |
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...
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
- 56 Measurement 56
- 16 Measurement 16
- 16 Measurement 16
- 24 Measurement 24
- 16 Measurement 16
- 16 Measurement 16
- 24 Measurement 24
- 56 Measurement 56
#6200ee
R98 G0 B238
FAB Center cut
- 16 Measurement 16
- 16 Measurement 16
- 24 Measurement 24
- 16 Measurement 16
- 16 Measurement 16
- 56 Measurement 56
- 24 Measurement 24
- 8 Measurement 8
- 5656
#6200eeff
R98 G0 B238 A1.00
FAB End
Minimum 2, maximum of 4 actions aligned to opposite edge of the FAB
- 56 Measurement 56
- 24 Measurement 24
- 16 Measurement 16
- 24 Measurement 24
- 24 Measurement 24
- 24 Measurement 24
- 16 Measurement 16
- 16 Measurement 16
- 16 Measurement 16
- 28 Measurement 28
- 5656
#6200ee
R98 G0 B238
No FAB
Minimum 2, maximum of 4 actions aligned on opposite edge of navigation menu
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...
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
- 48 Measurement 48
- 24 Measurement 24
- 16 Measurement 16
- 16 Measurement 16
- 24 Measurement 24
- 12 Measurement 12
- 12 Measurement 12
- 5656
#6200eeff
R98 G0 B238 A1.00