AppBar

Navigation

Application bar with scroll effects, elevation changes, and fixed/sticky positioning

Basic Usage

Variants

Default

Elevated

Outlined

Transparent

With Blur

Colors

Default

Primary

Secondary

Sizes

Small

Medium (Default)

Large

Practical Example: E-commerce Header

Practical Example: Dashboard Header

Usage Guidelines

When to Use

Main site navigation
App headers
Sticky toolbars

Accessibility

Uses nav landmark
Keyboard accessible menus
Skip links supported

Performance

Scroll events debounced
Uses CSS transforms for animations

Common Mistakes

Not handling scroll state properly
Fixed position blocking content

Frequently Asked Questions

Yes, AppBar supports fixed, sticky, and static positioning with scroll-based elevation changes.

Yes, AppBar can change appearance on scroll including elevation, color, and transparency.

View on GitHub

See the full source code on GitHub

Related Components

View all

BottomNavigation

Mobile bottom navigation bar with icon labels and active state indicators

Breadcrumb

Hierarchical navigation trail with separator customization, truncation support, and ARIA navigation landmarks

Link

Enhanced anchor element with variant system, external link indicators, and programmatic navigation integration

Menubar

Horizontal menu bar implementing nested dropdown menus with keyboard navigation, ARIA menubar pattern, and collision detection