The site header — brand, nav links, an actions slot, and a CTA button. A link can carry a dropdown of child links, or open a full-width hero "mega menu"; collapses to an offcanvas drawer on mobile.
The bar's content held to the ladder's inset rung, so the wordmark lines up with a page built on inset bands. The bar itself still spans the window — a width modifier narrows what is IN a header, never the header.
A rounded bar floating clear of the page edges — the one shape where the bar itself narrows rather than the row inside it. Sticky here, so it rides over the content holding its gap.
id: nav-mega
brand: Riverside College
active: Academics
links: [3 items]
cta_label: Apply now
cta_href: #
Fields (18)
Field
Type
Notes
sticky
boolean
Off by default — the bare header sits at the top of the page and scrolls away with it. Turn on for a bar that follows. Combines with Overlay: transparent over the hero, then a bar once the page moves.
reveal
boolean
A sticky bar that gets out of the way while you read and returns the moment you scroll up. Implies Follows the scroll. Without JavaScript it is simply sticky.
brand
text
brand_href
url
Where the wordmark links — the site home
brand_html
text
Optional rich wordmark (raw HTML) — overrides the plain brand text
brand_after
text
Optional raw HTML placed immediately after the wordmark — for a control that belongs to the PAGE rather than the site nav, e.g. a docs rail toggle. The `actions` slot is the trailing equivalent.
links
repeater
cta_label
text
cta_href
url
active
text
Label of the current page's nav item
fixed
boolean
Pins the bar and adds a bottom border
overlay
boolean
Sit transparently over a full-bleed hero — renders light, out of flow. On its own it scrolls away with the hero; combine with Follows the scroll or Hides going down for a bar that becomes solid once the page moves.
pill
boolean
The bar becomes a rounded pill floating clear of the page edges — the one shape where the bar itself narrows rather than the row inside it. Composes with Follows the scroll, Hides going down, and Overlay. Width has no job here: the pill owns its measure.
width
text
A rung borrowed from the container ladder — empty (the page measure) · inset · fluid. full-bleed and prose have no job on a bar.
container
text
DEPRECATED — a raw Bootstrap class, pasted through. Use `width` instead, which names a rung. Kept for records written before the rung existed.
id
text
Unique id for the offcanvas drawer — set when a page has more than one navbar
arrangement
text
empty (brand left, links centred) · center-brand (brand between two halves of the links) · nav-end (links pushed to the end). Emits the class AND any markup the shape needs