Top App Bar
Material Design 3 top app bar web component (center-aligned, small, medium, large).
- 1.8 KB gzipped
- @lit-material/top-app-bar 0.0.4
- Renders on the server
Example
Top App Bar
Center-aligned, small, medium, large variants.
Scroll this panel — the bar picks up elevation once its own scrollTarget passes the
threshold, not the page's scroll.
Keep scrolling…
Install
npm install @lit-material/top-app-bar @lit-material/tokensimport "@lit-material/top-app-bar";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-top-app-bar>
Material Design 3 top app bar.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
variant | variant | TopAppBarVariant | "small" | |
elevated | elevated | boolean | false | Whether the bar shows its "scrolled" surface tint + shadow. Kept in sync
automatically from scrollTarget (or window scroll by default), but
can also be set directly if you're driving it from your own listener. |
scrollTarget | property only | HTMLElement | undefined | none | Element whose scroll position drives elevated automatically. Defaults to window. |
threshold | threshold | number | 4 | Scroll offset in pixels past which elevated turns on. |
Slots
| Slot | Description |
|---|---|
| default | The headline/title text. |
leading | Typically a single navigation icon button. |
trailing | Action icon buttons, in order. |
CSS parts
| Part | Description |
|---|---|
bar | The header element (background/elevation). |
leading | The leading slot's container. |
headline | The headline slot's container. |
trailing | The trailing slot's container. |