Bottom App Bar

Bottom app bars display primary actions at the bottom of the screen. Supports standard layout and with-FAB cutout variant for prominent primary actions. Not intended for large navigation sets where a dedicated navigation bar should be used.

Basic Usage (Standard)

Default bottom app bar with action buttons aligned to the right. It keeps high-frequency actions reachable on mobile layouts. 

<ds-app-bar-bottom>
  <button slot="actions" aria-label="Search" class="material-symbols-outlined">search</button>
  <button slot="actions" aria-label="More" class="material-symbols-outlined">more_vert</button>
</ds-app-bar-bottom>

Initial Value

Actions are populated from slot content. Multiple buttons display in order from left to right. 

<ds-app-bar-bottom>
  <button slot="actions" aria-label="Save" class="material-symbols-outlined">save</button>
  <button slot="actions" aria-label="Undo" class="material-symbols-outlined">undo</button>
  <button slot="actions" aria-label="Redo" class="material-symbols-outlined">redo</button>
</ds-app-bar-bottom>

With FAB Cutout

The with-fab variant creates a centered cutout for a floating action button, emphasizing a primary action.

add 
<ds-app-bar-bottom variant="with-fab">
  <button slot="fab" aria-label="Add" class="fab-button">add</button>
  <button slot="actions" aria-label="Favorites" class="material-symbols-outlined">favorite</button>
  <button slot="actions" aria-label="Music" class="material-symbols-outlined">music_note</button>
</ds-app-bar-bottom>

Variants

Choose between standard and with-fab layouts.

Standard

With FAB

create

Interactive Example

Click actions to see state changes. FAB appears centered.

edit

Last action: None

Usage Guidelines

When to Use

  • Quick access to secondary actions at bottom of screen
  • Mobile-friendly action placement (thumb reach)
  • Prominent primary action with with-fab variant

Best Practices

  • Keep it simple: Limit to 2-4 action buttons
  • Use with-fab: For one prominent primary action
  • Icon buttons: Use Material Symbols with aria-labels
  • Mobile first: Position actions within thumb reach

When Not to Use

  • Top-level navigation (use top app bar instead)
  • More than one primary action (FAB is for single primary action)
  • On pages without significant bottom space

API

DSAppBarBottom

Container for bottom app bar variants.

Attributes

Attribute Type Default Description
variant "standard" | "with-fab" "standard" Layout variant (with or without FAB cutout)

Slots

Slot Description
actions Trailing action buttons (right side)
fab FAB element (center cutout, with-fab variant only)

CSS Parts

Part Description
container App bar container
fab-area FAB cutout area (with-fab variant)
actions Trailing actions region

CSS Custom Properties

Property Default Description
--ds-app-bar-bg --md-sys-color-surface Background color
--ds-app-bar-color --md-sys-color-on-surface Foreground color
--ds-app-bar-shadow 0 4px 12px rgba(0,0,0,0.12) Box shadow/elevation

Accessibility

  • Landmark: App bar uses role="contentinfo"
  • Actions: Provide clear aria-label for each action button
  • FAB: Ensure FAB has descriptive aria-label for primary action
  • Keyboard: Tab to buttons, activate with Enter/Space
  • Focus: Visible focus rings on all controls