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

Sticky not sticking? Check the ancestors' overflow

sticky defaults to true and applies position: sticky; top: 0 — but a sticky element sticks to its nearest scroll container, not necessarily the viewport. Any ancestor with overflow set to hidden, auto or scroll on either axis becomes that container and captures the nav.

The usual culprit is a page wrapper with overflow-x-hidden. Per CSS overflow, when one axis is not visible the other computes from visible to auto — so overflow-x-hidden silently makes the <div> a scroll container. Its height is content-driven, so it never scrolls internally: the nav gets zero scroll range and rides the document scroll away.

Fix: use overflow-x: clip. It suppresses horizontal overflow the same way but is not a scroll container, so overflow-y stays visible. (presetWind4 ships the overflow-x-clip utility.)

-  <div class="bg-white relative overflow-x-hidden w-full">
+  <div class="bg-white relative overflow-x-clip w-full">

Measured in a real layout chain: with hidden the nav moved top 0 → -604px over an 800px scroll; with clip it held at top 0.

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

CSS Variables

Vue SFC

Every nav is themed through --mono-nav-* custom properties. Setting one on the element, on any wrapper/ancestor, or inline all work — custom properties inherit, and they pierce the shadow-DOM boundary, so the same overrides apply to <mono-nav> and the shadow build. The density and color props set presets, but an explicit --mono-nav-* override always wins. To re-skin globally, set the underlying --theme-* tokens.

The bar height knob is --mono-nav-bar-height — --mono-nav-height is the separate layout-padding value the nav writes to :root for .mono-layout-content.

Variable	Default	Controls
--mono-nav-accent	--theme-primary	Accent (borders, focus, elevated glow); set by color
--mono-nav-bg	--theme-surface	Bar background (painted by non-surface colors)
--mono-nav-text	--theme-text	Bar text color
--mono-nav-text-soft	text 62%	Muted / secondary text color
--mono-nav-border	--theme-border	outlined bottom border color
--mono-nav-border-lite	border 55%	Extension-row / divider border
--mono-nav-bar-height	56px	Bar row height (set by density)
--mono-nav-pad-x	1.25rem	Horizontal padding (set by density)
--mono-nav-gap	0.75rem	Gap between items (set by density)
--mono-nav-extension-height	44px	Extension-row height (set by density)
--mono-nav-shadow	accent glow	elevated shadow
--mono-nav-radius	0	Bar corner radius

Types

Importimport { NavProps } from 'mono-helper'

Prop	Value	Default	Description
sticky	boolean	—	Sticks the bar to the top of the viewport on scroll.
density	'default' | 'compact' | 'comfortable'	—	Vertical spacing density of the bar.
color	'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'surface'	—	Theme color of the bar background.
variant	'elevated' | 'outlined' | 'flat'	—	Visual style of the bar (flat, elevated, or outlined).
extension	boolean	—	Renders an additional extension row below the bar.
cssClass	NavCssClass	—	Per-part class overrides for internal elements.