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:

  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.

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.

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.

API

Properties

AttributePropertyReflectTypeDefault
hidehidebooleanfalse

Hides the bottom app bar when set.

fab-detachfabDetachbooleanfalse

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.

scroll-thresholdscrollThresholdnumber-

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

orderordernumber-

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.

MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Introduction Installation Usage TypeScript Support IDE Support Localization Frequently Asked Questions
Styles
Dark Theme Dynamic Theme Typography Design Tokens
Frameworks
React Vue Angular
Components
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
Functions
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
Libraries
@mdui/icons