App Bar
Material Design 3 app bar component for top and bottom navigation
App Bar
App bars display information and actions related to the current screen. @duskmoon-dev/core provides flexible top and bottom app bars.
Basic Usage
Basic App Bar
html
<header class="appbar">
<div class="appbar-leading">
<button class="appbar-action" aria-label="Menu">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<div class="appbar-title">
<h1 class="appbar-heading">Page Title</h1>
</div>
<div class="appbar-trailing">
<button class="appbar-action" aria-label="Search">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
</div>
</header>Position
Static (Default)
Static App Bar
html
<header class="appbar appbar-static">
<div class="appbar-title">
<h1 class="appbar-heading">Static App Bar</h1>
</div>
</header>Fixed
Add appbar-fixed to create a fixed app bar that stays at the top of the viewport.
Fixed App Bar (demo without positioning)
html
<!-- In production: add appbar-fixed class -->
<header class="appbar">
<div class="appbar-title">
<h1 class="appbar-heading">Fixed App Bar</h1>
</div>
</header><!-- Usage in production -->
<header class="appbar appbar-fixed">
<div class="appbar-title">
<h1 class="appbar-heading">Fixed App Bar</h1>
</div>
</header>Sticky
Add appbar-sticky to create a sticky app bar that becomes fixed when scrolling.
Sticky App Bar (demo without positioning)
html
<!-- In production: add appbar-sticky class -->
<header class="appbar">
<div class="appbar-title">
<h1 class="appbar-heading">Sticky App Bar</h1>
</div>
</header><!-- Usage in production -->
<header class="appbar appbar-sticky">
<div class="appbar-title">
<h1 class="appbar-heading">Sticky App Bar</h1>
</div>
</header>Surface Variants
Surface Variants
html
<header class="appbar appbar-surface">
<div class="appbar-title">
<h1 class="appbar-heading">Surface</h1>
</div>
</header>
<header class="appbar appbar-surface-container">
<div class="appbar-title">
<h1 class="appbar-heading">Surface Container</h1>
</div>
</header>
<header class="appbar appbar-surface-container-high">
<div class="appbar-title">
<h1 class="appbar-heading">Surface Container High</h1>
</div>
</header>Color Variants
Color Variants
html
<header class="appbar appbar-primary">
<div class="appbar-title">
<h1 class="appbar-heading">Primary</h1>
</div>
</header>
<header class="appbar appbar-secondary">
<div class="appbar-title">
<h1 class="appbar-heading">Secondary</h1>
</div>
</header>
<header class="appbar appbar-tertiary">
<div class="appbar-title">
<h1 class="appbar-heading">Tertiary</h1>
</div>
</header>Transparent with Blur
Transparent with Blur
html
<header class="appbar appbar-transparent appbar-blur">
<div class="appbar-title">
<h1 class="appbar-heading">Transparent Blur</h1>
</div>
</header>With Subtitle
App Bar with Subtitle
html
<header class="appbar">
<div class="appbar-title">
<h1 class="appbar-heading">Page Title</h1>
<p class="appbar-subtitle">Subtitle text</p>
</div>
</header>With Back Button
App Bar with Back Button
html
<header class="appbar">
<div class="appbar-leading">
<button class="appbar-back" aria-label="Go back">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</button>
</div>
<div class="appbar-title">
<h1 class="appbar-heading">Detail Page</h1>
</div>
</header>With Actions
App Bar with Actions
html
<header class="appbar">
<div class="appbar-leading">
<button class="appbar-action" aria-label="Menu">☰</button>
</div>
<div class="appbar-title">
<h1 class="appbar-heading">App Name</h1>
</div>
<div class="appbar-trailing">
<button class="appbar-action" aria-label="Search">🔍</button>
<button class="appbar-action" aria-label="Notifications">🔔</button>
<button class="appbar-action" aria-label="More">⋮</button>
</div>
</header>With Search
App Bar with Search
html
<header class="appbar">
<div class="appbar-leading">
<button class="appbar-action" aria-label="Menu">☰</button>
</div>
<input type="search" name="appbar-search" class="appbar-search" placeholder="Search..." aria-label="Search" />
<div class="appbar-trailing">
<button class="appbar-action" aria-label="Profile">👤</button>
</div>
</header>Sizes
App Bar Sizes
html
<header class="appbar appbar-compact">
<div class="appbar-title">
<h1 class="appbar-heading">Compact</h1>
</div>
</header>
<header class="appbar">
<div class="appbar-title">
<h1 class="appbar-heading">Default</h1>
</div>
</header>
<header class="appbar appbar-comfortable">
<div class="appbar-title">
<h1 class="appbar-heading">Comfortable</h1>
</div>
</header>Prominent (Large)
Prominent App Bar
html
<header class="appbar appbar-prominent">
<div class="appbar-leading">
<button class="appbar-action" aria-label="Menu">☰</button>
</div>
<div class="appbar-title">
<h1 class="appbar-heading">Large Title</h1>
</div>
<div class="appbar-trailing">
<button class="appbar-action" aria-label="Search">🔍</button>
</div>
</header>Bottom App Bar
Bottom app bars display navigation and key actions at the bottom of the screen. In production, appbar-bottom uses fixed positioning.
Bottom App Bar (demo without positioning)
html
<!-- In production: appbar-bottom uses position: fixed -->
<footer class="appbar">
<div class="appbar-leading">
<button class="appbar-action" aria-label="Menu">☰</button>
</div>
<div class="appbar-trailing">
<button class="appbar-action" aria-label="Search">🔍</button>
<button class="appbar-action" aria-label="Favorite">❤️</button>
<button class="appbar-action" aria-label="More">⋮</button>
</div>
</footer><!-- Usage in production -->
<footer class="appbar appbar-bottom">
<div class="appbar-leading">
<button class="appbar-action" aria-label="Menu">☰</button>
</div>
<div class="appbar-trailing">
<button class="appbar-action" aria-label="Search">🔍</button>
<button class="appbar-action" aria-label="Favorite">❤️</button>
<button class="appbar-action" aria-label="More">⋮</button>
</div>
</footer>Styles
App Bar Styles
html
<!-- Flat (no shadow) -->
<header class="appbar appbar-flat">
<div class="appbar-title">
<h1 class="appbar-heading">Flat</h1>
</div>
</header>
<!-- Bordered -->
<header class="appbar appbar-bordered">
<div class="appbar-title">
<h1 class="appbar-heading">Bordered</h1>
</div>
</header>API Reference
App Bar Classes
| Class | Description |
|---|---|
.appbar |
Base app bar (required) |
.appbar-top |
Top app bar (default) |
.appbar-bottom |
Bottom app bar |
.appbar-fixed |
Fixed position |
.appbar-sticky |
Sticky position |
.appbar-static |
Static position |
.appbar-surface |
Surface background |
.appbar-surface-container |
Surface container |
.appbar-surface-container-low |
Surface container low |
.appbar-surface-container-high |
Surface container high |
.appbar-surface-container-highest |
Surface container highest |
.appbar-primary |
Primary color |
.appbar-secondary |
Secondary color |
.appbar-tertiary |
Tertiary color |
.appbar-transparent |
Transparent background |
.appbar-blur |
Backdrop blur effect |
.appbar-compact |
Compact size |
.appbar-comfortable |
Comfortable size |
.appbar-prominent |
Large/prominent variant |
.appbar-flat |
No shadow |
.appbar-bordered |
With border |
.appbar-center |
Center-aligned title |
Content Classes
| Class | Description |
|---|---|
.appbar-leading |
Leading section (left) |
.appbar-title |
Title section (center) |
.appbar-trailing |
Trailing section (right) |
.appbar-heading |
Main heading text |
.appbar-subtitle |
Subtitle text |
.appbar-action |
Action button |
.appbar-back |
Back button |
.appbar-search |
Search input |
Related Components
- Navbar - Navigation bar
- Bottom Navigation - Bottom navigation