ComponentsNavigation
App bar
The bar at the top (or bottom) of an application that carries its title, navigation toggle and global actions. Use one per layout; page-level actions belong in a toolbar.
Basic app bar
A navigation toggle, a title and a few global actions. Every icon-only button carries an accessible name. These previews set Fixed to false so the bar stays inside its frame.
New arrivals, staff picks and the autumn reading list scroll beneath the bar.
Colors
Every Color value on a dense bar. Default takes the theme's app bar palette, which is usually what you want; Inherit and Transparent take the surroundings.
Density and elevation
Dense reduces the bar from 64 to 48 pixels. Elevation sets the shadow; zero suits a bar that sits on a rule or a coloured page.
Elevation 0 · regular, 64 px
Elevation 0 · dense, 48 px
Elevation 2 · regular, 64 px
Elevation 2 · dense, 48 px
Elevation 8 · regular, 64 px
Elevation 8 · dense, 48 px
Bottom app bar
Bottom pins a fixed bar to the bottom of the viewport, within thumb reach on phones. This frame keeps the bar in normal flow at the end of a flex column.
Tonight at Ridgeline Observatory
Moonrise
21:42, waning gibbous
Seeing
Good, 1.4 arcseconds
Cloud cover
12 percent, clearing after midnight
Public session
22:00 to 23:30, 18 booked
Search, status and account
A realistic header: brand, a live status chip, a search field, notifications with an unread count, and an account menu.
Contextual action bar
MudContextualActionBar fills a MudAppBar marked Contextual while Visible is true, typically while items are selected. It names the selection and offers actions for it; clearing the selection brings the bar's own content back. Focus moves to the status line when the actions disappear.
Playground
Change any parameter; the markup below shows only the values that differ from the defaults.
<MudAppBar>
<MudText Typo="Typo.h6">Field notes</MudText>
<MudSpacer />
</MudAppBar>