Skip to content

Black Friday 2026Pro Unlimited Lifetime: €299€99 once.

Ends in —d —h —m —s

See the deal
L-112Layout

Orbit Pill Header

Floating glass-pill SaaS header as a plain, fully editable Bricks tree over an optional demo hero: header > head > pill bar (brand with an animated orbit mark and a wordmark that folds away when the pill detaches; menu hol…

Get this with ProIncluded in your plan

50 sites for €79 only, Compare all plans

Preview Desktop, 1280px

All photos and visual assets used in this preview are sourced from Unsplash.

The system behind it

One pattern, your whole brand.

Orbit Pill 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 8

Set on the section, in Bricks’ attributes panel. No code needed.

data-theme
lightdark

data-accent
primarysecondaryneutral

ACSS colour for the CTA, indicator, icon tiles and orbit mark

data-position
staticsticky

with the demo stage on, the pill sticks while the stage scrolls

data-detach
truefalse

detach into a compact lifted pill after scrolling

data-glass
truefalse

frosted or solid pill

data-orbit
alwayshoveroff

satellite motion around the mark

data-reveal
circlefade

mobile menu entrance

data-stage
truefalse

the demo hero behind the pill

Component props 5

Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.

Orbit Nav1 in this pattern · 5 props
PropTypeDefault
indicator
text

pill

trigger
text

click

easing
text

spring

duration
number

560

label
text

Primary

Nav Link3 in this pattern · 5 props
PropTypeDefault
label
text

Pricing

url
text

#pricing

current
true / false

False

showBadge
true / false

False

badge
text

New

Product Link6 in this pattern · 10 props
PropTypeDefault
icon
text

calendar

title
text

Scheduling

desc
text

Drag work onto a shared weekly board.

url
text

#scheduling

showDesc
true / false

True

showBadge
true / false

False

badge
text

New

preview
text

https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=720

previewAlt
text

A product team planning around a laptop

previewText
text

One board for people, projects and hours.

Resource Link4 in this pattern · 6 props
PropTypeDefault
title
text

Docs

url
text

#docs

showMeta
true / false

True

meta
text

Guides and API reference

live
true / false

False

external
true / false

False

Stage Stat3 in this pattern · 2 props
PropTypeDefault
value
text

4,000+

label
text

teams plan their week here

Included in Pro €99 once with Pro Unlimited Lifetime: all 785 patterns, unlimited sites.

Get Pro

More patterns

Keep browsing.

L-000

Quick View

Desktop, 1440px
Pro
demo.bricksed.com

The real preview of this pattern. Every pattern adapts to your ACSS tokens.

Unlock with ProSee plansIncluded in your plan