BottomAppBar

The Bottom App Bar provides navigation and key actions at the bottom of a mobile page.

Usage

Import the component:

import 'mdui/components/bottom-app-bar.js';

Import the TypeScript type:

import type { BottomAppBar } from 'mdui/components/bottom-app-bar.js';

Example: (Note: The style="position: relative" in the example is for demonstration purposes only. Remove it in actual use.)

<mdui-bottom-app-bar style="position: relative;">
  <mdui-button-icon icon="check_box--outlined"></mdui-button-icon>
  <mdui-button-icon icon="edit--outlined"></mdui-button-icon>
  <mdui-button-icon icon="mic_none--outlined"></mdui-button-icon>
  <mdui-button-icon icon="image--outlined"></mdui-button-icon>
  <div style="flex-grow: 1"></div>
  <mdui-fab icon="add"></mdui-fab>
</mdui-bottom-app-bar>

Notes:

The BottomAppBar component uses position: fixed by default. It automatically adds padding-bottom to the body to prevent the page content from being obscured.

However, it uses position: absolute in the following two cases:

When the scroll-target attribute is specified. In this case, padding-bottom will be added to the element specified by scroll-target.
When it's within the <mdui-layout></mdui-layout> component. In this case, padding-bottom won't be added.

Examples

In Container

By default, the Bottom App Bar displays at the bottom of the page, relative to the current window.

To place it inside a specific container, specify the scroll-target attribute with the CSS selector or DOM element of the container. Ensure the parent element has position: relative; overflow: hidden styles.

Content

<div style="position: relative;overflow: hidden">
  <mdui-bottom-app-bar scroll-target=".example-scroll-target">Content</mdui-bottom-app-bar>

  <div class="example-scroll-target" style="height: 200px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

Code

Hide on Scroll

To hide the Bottom App Bar when scrolling down and display it when scrolling up, set the scroll-behavior attribute to hide.

The scroll-threshold attribute can be used to set the number of pixels to start hiding the Bottom App Bar.

Content

<div style="position: relative;overflow: hidden">
  <mdui-bottom-app-bar
    scroll-behavior="hide"
    scroll-threshold="30"
    scroll-target=".example-scroll-behavior"
  >Content</mdui-bottom-app-bar>

  <div class="example-scroll-behavior" style="height: 200px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

Code

Fixed Floating Action Button

If the Bottom App Bar includes a Floating Action Button (FAB), add the fab-detach attribute to anchor the FAB at the page's bottom right when the Bottom App Bar hides on scroll.

<div style="position: relative;overflow: hidden">
  <mdui-bottom-app-bar
    fab-detach
    scroll-behavior="hide"
    scroll-threshold="30"
    scroll-target=".example-fab-detach"
  >
    <mdui-button-icon icon="check_box--outlined"></mdui-button-icon>
    <mdui-button-icon icon="edit--outlined"></mdui-button-icon>
    <mdui-button-icon icon="mic_none--outlined"></mdui-button-icon>
    <mdui-button-icon icon="image--outlined"></mdui-button-icon>
    <div style="flex-grow: 1"></div>
    <mdui-fab icon="add"></mdui-fab>
  </mdui-bottom-app-bar>

  <div class="example-fab-detach" style="height: 200px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

Code

API

Properties

Attribute	Property	Type	Default
`hide`	`hide`	`boolean`	`false`
Hides the bottom app bar when set.
`fab-detach`	`fabDetach`	`boolean`	`false`
When set, detaches the `<mdui-fab>` from the bottom app bar. The `<mdui-fab>` remains on the page even after the app bar is hidden.
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
Defines the scroll behavior. Possible values: `hide`: Hides when scrolling.
`scroll-target`	`scrollTarget`	`string \| HTMLElement \| JQ<HTMLElement>`	-
The element that listens for scroll events. Accepts a CSS selector, DOM element, or JQ object. Defaults to `window`.
`scroll-threshold`	`scrollThreshold`	`number`	-
The scroll distance (in pixels) that triggers the scroll behavior.
`order`	`order`	`number`	-
Specifies the layout order within the `<mdui-layout>` component. Items are sorted in ascending order. The default value is `0`.

Events

Name
`show`
Emitted when the bottom app bar starts to show. Can be prevented with `event.preventDefault()`.
`shown`
Emitted after the bottom app bar has shown and animations are complete.
`hide`
Emitted when the bottom app bar starts to hide. Can be prevented with `event.preventDefault()`.
`hidden`
Emitted after the bottom app bar has hidden and animations are complete.

Slots

Name
(default)
Elements within the bottom app bar.

CSS Custom Properties

Name
`--shape-corner`
The size of the component corner. You can use a specific pixel value, but it's recommended to reference design tokens.
`--z-index`
The CSS `z-index` value of the component.

Badge

Up Next

Button