Command Bar Header
Keyboard-first SaaS / docs header as a plain, fully editable Bricks tree: header > announcement band (New pill, message, link, dismiss) > blurred bar (brand, product switcher with an anchored panel of "Product" instances,…
50 sites for €79 only, Compare all plans
All photos and visual assets used in this preview are sourced from Unsplash.
The system behind it
One pattern, your whole brand.
Command Bar Header reads your ACSS tokens, so changing a color, a font or a spacing value once restyles it everywhere. No hard-coded values, nothing to override.
- Type
- Layout
- Category
- Footers and headers
- Responsive
- Desktop to phone
- Works with
- Bricks, ACSS, plain CSS
Options 7
Set on the section, in Bricks’ attributes panel. No code needed.
data-themecolour theme
data-announcementshow the announcement band
data-rememberremember a dismissed announcement in localStorage
data-positionsticky pins the header and collapses the demo stage
data-stagethe demo stage with the docked palette
data-indicatordesktop nav hover indicator
data-patternstage background texture
Component props 4
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
labelDocs
url#docs
currentFalse
showBadgeFalse
badgeNew
showDescriptionTrue
descriptionGuides, SDKs and recipes
monoS
nameSync
url#sync
currentFalse
showTagFalse
tagNew
showDescTrue
descStream changes between databases
labelDashboard
url#dashboard
iconhome
actionlink
showHintTrue
hintOverview of every workspace
descriptionLive health of every workspace at a glance.
showKeysTrue
keysG D
showBadgeFalse
badgeNew
shortcutk
placeholderSearch pages, actions and docs
showFiltersTrue
showPreviewTrue
showFooterTrue
morphTrue
easingspring
duration420
emptyTextNothing matches
Included in Pro €99 once with Pro Unlimited Lifetime: all 785 patterns, unlimited sites.
Get Pro

Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 page






