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


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>


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:

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


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.

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.

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.




Hides the bottom app bar when set.


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-behaviorscrollBehavior'hide' | 'shrink' | 'elevate'-

Defines the scroll behavior. Possible values:

  • hide: Hides when scrolling.
scroll-targetscrollTargetstring | HTMLElement | JQ<HTMLElement>-

The element that listens for scroll events. Accepts a CSS selector, DOM element, or JQ object. Defaults to window.


The scroll distance (in pixels) that triggers the scroll behavior.


Specifies the layout order within the <mdui-layout> component. Items are sorted in ascending order. The default value is 0.



Emitted when the bottom app bar starts to show. Can be prevented with event.preventDefault().


Emitted after the bottom app bar has shown and animations are complete.


Emitted when the bottom app bar starts to hide. Can be prevented with event.preventDefault().


Emitted after the bottom app bar has hidden and animations are complete.



Elements within the bottom app bar.

CSS Custom Properties


The size of the component corner. You can use a specific pixel value, but it's recommended to reference design tokens.


The CSS z-index value of the component.

Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Introduction Installation Usage TypeScript Support IDE Support Localization Frequently Asked Questions
Dark Theme Dynamic Theme Typography Design Tokens
React Vue Angular
Button ButtonIcon Fab SegmentedButton Chip Card Checkbox Radio Switch Slider RangeSlider List Collapse Tabs Dropdown Menu Select TextField LinearProgress CircularProgress Dialog Divider Avatar Badge Icon Tooltip Snackbar NavigationBar NavigationDrawer NavigationRail BottomAppBar TopAppBar Layout
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint