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
Types
Import
import { NavProps } from 'mono-helper'| Prop | Value | Default | Description |
|---|---|---|---|
sticky | boolean | true | Sticks the bar to the top of the viewport on scroll. |
density | 'default' | 'compact' | 'comfortable' | 'comfortable' | Vertical spacing density of the bar. |
color | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'surface' | 'surface' | Theme color of the bar background. |
variant | 'elevated' | 'outlined' | 'flat' | 'elevated' | Visual style of the bar (flat, elevated, or outlined). |
extension | boolean | false | Renders an additional extension row below the bar. |
cssClass | NavCssClass | {} | Per-part class overrides for internal elements. |