BottomAppBar

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

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 production.)

<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 <mdui-bottom-app-bar> component uses position: fixed by default. It automatically adds padding-bottom to the body to prevent the page content from being obscured.

However, it falls back to position: absolute in the following cases:

When the scroll-target attribute is specified. In this case, padding-bottom is added to the element specified by scroll-target.
When the component is used inside the <mdui-layout></mdui-layout> component. In that case, padding-bottom is not added.

Examples

In Container

By default, the Bottom App Bar is fixed to the bottom of the page.

To place it inside a specific container, specify the scroll-target attribute with the CSS selector or DOM element of the container. The parent element must have 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>

Source

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.

Use the scroll-threshold attribute to set how many pixels must be scrolled before the Bottom App Bar starts hiding.

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>

Source

Fixed Floating Action Button

If the Bottom App Bar includes a Floating Action Button (FAB), add the fab-detach attribute to pin the FAB to the page's bottom-right corner 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>

Source

API

Properties

Attribute	Property	Type	Default
`hide`	`hide`	`boolean`	`false`
Whether the bottom app bar is hidden.
`fab-detach`	`fabDetach`	`boolean`	`false`
If 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'`	-
Specifies the scroll behavior. Possible values: `hide`: Hides when scrolling.
`scroll-target`	`scrollTarget`	`string \| HTMLElement \| JQ<HTMLElement>`	-
The element to watch for scroll events. Accepts a CSS selector, a DOM element, or a JQ object. Defaults to `window`.
`scroll-threshold`	`scrollThreshold`	`number`	-
The scroll distance (in pixels) required to trigger 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 corner radius of the component. You can use a specific pixel value, but it is recommended to reference design tokens.
`--z-index`
The CSS `z-index` value of the component.

Badge

Button