Nav

A sticky top app bar built around three named slots — start, default (center), and end — plus an optional extension second row. Three densities (compact / comfortable / default), three variants (flat / elevated / outlined), and seven colors (six themed + surface for the white-with-themed-border default). Writes its resolved height to --mono-nav-height on :root so layout wrappers can pad themselves without prop drilling. Toggle Vue / CSS to switch the live demo and source together.

Basic

Sticky top bar with a brand on the left and an avatar on the right.

Vue SFC

Density

compact (48 px), comfortable (56 px), default (64 px).

Vue SFC

Colors

Six themed accents plus the white surface default.

Vue SFC

Variants

flat (no shadow), elevated (shadow), outlined (bottom border).

Vue SFC

Extension row

Second row beneath the main bar via the extension slot — useful for tabs or breadcrumbs.

Vue SFC

Non-sticky

Inline header that scrolls with the page.

Vue SFC

Dashboard top bar

Realistic composition: brand on the left, search center, icon actions and avatar on the right.

Vue SFC

Layout var

Reads --mono-nav-height from :root to auto-pad the page below the bar.

Vue SFC

Customized

Override per-section styling via cssClass (Vue) or utility classes (CSS).

Vue SFC