AppBar
A top application bar with start, center, and end content slots — sticky by default, with optional border and elevation.
When to Use
- Provide a consistent top navigation bar across all pages of an app.
- Group branding (logo), search, and user actions (avatar, theme toggle) in one bar.
- Use as the primary anchor for app navigation and global actions.
Acme Corp
Page content here
Dashboard
JD
Page content here
Toggle options to see them applied live.
My App
Page content here
My App
Page content here
API Reference
AppBar
| Property | Type | Default | Description |
|---|---|---|---|
| StartContent | RenderFragment? | null | Left-side slot (logo, hamburger menu, brand name). |
| ChildContent | RenderFragment? | null | Center slot — grows to fill remaining space (search bar, nav links). |
| EndContent | RenderFragment? | null | Right-side slot (avatar, theme toggle, action buttons). |
| Sticky | bool | true | When true, uses sticky top-0 z-30 to pin to the viewport. |
| Bordered | bool | true | When true, adds a subtle bottom border. |
| Elevated | bool | false | When true, adds a shadow-sm drop shadow for depth. |
| Height | string | "h-14" | Tailwind height class applied to the bar (e.g., "h-12", "h-16"). |
Related Components
- Toolbar — A contextual toolbar within a panel or editor — not full-width.
- Sidebar — Collapsible vertical navigation — often used alongside AppBar.
- NavigationMenu — Horizontal mega-navigation for site-level nav links.