Skip to content
Domphy

toolbar

A horizontal flex row with vertically centered items. Useful for headers, toolbars, navigation bars, and action strips. A semantic alias of row() — wrap/justify/align/density are forwarded so callers do not drop down to hand-rolled flex.

Usage

import { strong, toolbar, toolbarSpacer } from "@domphy/ui"

const Header = {
  header: [
    { a: "Acme", href: "/", $: [strong()] },
    toolbarSpacer(),
    { nav: [{ a: "Docs", href: "/docs" }, { a: "Pricing", href: "/pricing" }], $: [toolbar({ gap: 4 })] },
    { button: "Sign in", type: "button" },
  ],
  $: [toolbar({ gap: 4 })],
}

Props

PropTypeDefaultDescription
gapnumber4Spacing multiplier for gap between items. With density: true (default): themeSpacing(density × gap) — at default density (1.5), gap 4 = 1.5em. With density: false: bare themeSpacing(gap) — gap 4 = 1em.
wrapbooleanfalseAllow items to wrap onto multiple lines (flexWrap: "wrap").
justify"flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly"unsetMain-axis distribution (justifyContent). Left unset by default (flex's own default, flex-start).
align"flex-start" | "center" | "flex-end" | "stretch" | "baseline""center"Cross-axis alignment (alignItems).
densitybooleantrueWhen true, gap is multiplied by theme density (bounded-control mode). When false, gap is structural themeSpacing(n) with no density multiply.

toolbarSpacer

A companion element — a <div> with flex: 1 1 0 — that expands to fill available space, pushing subsequent siblings to the far end.

// Logo left, nav+actions right
{ header: [logo, toolbarSpacer(), nav, actions], $: [toolbar()] }