Bottom

Basic Bottom App Bar

Basic bottom app bar with action buttons

Demo content area

Basic bottom app bar with four action buttons. The bottom app bar provides easy access to key actions on mobile devices, optimizing for thumb reach.

This example shows a standard implementation with icon buttons for common actions.

End position

Demo content area

Bottom app bar can include a floating action button (FAB) in two positions:

End position: Aligned to the trailing edge of the container (right in LTR, left in RTL)
Center position: Centered horizontally in the container

When a FAB is present, the bottom app bar uses a height of 72dp (instead of 80dp for standard).

When you scroll down, the bottom app bar will hide automatically.

When you scroll back up, it will reappear.

This behavior optimizes screen space for content while keeping actions accessible when needed.

Scroll content...

You've reached the bottom! Try scrolling back up.

This example demonstrates the auto-hide behavior of the bottom app bar during scrolling:

Scrolling <strong>down</strong> hides the bottom app bar to maximize content area.
Scrolling <strong>up</strong> reveals the bottom app bar again.
The transition between states is animated for a smooth user experience.

This pattern is useful for content-heavy applications where maximizing screen space is important.

The bottom app bar displays navigation actions like Home, Favorites, and Profile.

This mode is useful for helping users navigate between main sections of the app.

Bottom app bars can adapt to different contexts, showing different actions depending on the current mode:

Navigation Mode: Provides navigation between app sections, with a FAB for the primary action.
Editing Mode: Shows context-specific editing actions.
Selection Mode: Provides operations for working with selected items.

Switching between contexts provides a consistent location for actions while optimizing for the current task.

Current status: Visible

Use the buttons below to control the bottom app bar.

The bottom app bar can be controlled programmatically:

These methods allow you to adapt the bar's behavior and content based on user interactions or application state.

[4:23:18 PM] Bottom app bar mounted
[4:23:18 PM] Bottom app bar initialized

The Bottom App Bar provides several API methods and events:

Events: Listen for events like visibilityChange to react to bar state changes.
API Methods: Use methods like show(), hide(), and isVisible() to control the bar.
Configuration Callbacks: Provide callback functions in the initial configuration for key events.

The event system allows you to respond to user interactions and state changes in a flexible way.