Skip to main content

Navbar

Product-accurate top chrome: Scrawl blurred bar (nav right), Lggr gradient brand bar, Real Platform floating rounded-3xl toolbar with slate CTAs and lime profile.

atelier — product chrome (desktop width)

Default bar layout with brand + inline nav.

In App Shell (navbar + main)

Library

Main content sits below the header — same proportions as production shells.

Page content area

API

PropRequiredTypeDefaultDescription
themeOptionalSiteThemeatelierVisual theme — layout defaults per product.
layoutOptional"bar" | "floating"floating auto on real-platform (Header.tsx).
titleOptionalReactNodePage title in floating toolbar.
navAlignOptional"start" | "end"Nav link cluster — end on Scrawl.
NavbarBrand / NavbarTitle / NavbarIconAction / NavbarProfileChipOptionalsubcomponentsRegistry Link + Real Platform header controls.
brand / start / end / childrenOptionalReactNodeBrand, leading slot, actions, nav links (Button + NavItem).
stickyOptionalbooleantrueSticky top (bar layout).