AppBar
A top application bar with start, center, and end content slots — sticky by default, with optional border and elevation.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <AppBar />
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
Taller Bar
Height="h-16" gives a roomier bar.
My App
Page content here
API Reference
AppBar
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.