# AppBar

Source: https://lumeo.nativ.sh/components/app-bar

# 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.

Preview Code

Default AppBar

Acme Corp

Sign In Get Started

Page content here

Copy Code

Preview Code

With Search

Dashboard

JD

Page content here

Copy Code

Preview Code

Appearance toggles — interactive

Toggle options to see them applied live.

Elevated

Bordered

My App

Sign In Get Started

Page content here

Copy Code

Preview Code

Elevated (no border)

My App

Page content here

Copy Code

## 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](/components/toolbar) — A contextual toolbar within a panel or editor — not full-width.
-   [Sidebar](/components/sidebar) — Collapsible vertical navigation — often used alongside AppBar.
-   [NavigationMenu](/components/navigation-menu) — Horizontal mega-navigation for site-level nav links.