A whole site’s navigation in one bar
The brand, a pill for each section with a mega menu on any section that has one, and actions at the end. It sticks to the top of the viewport over a progressive blur, and the blur’s tint arrives once the page scrolls. When the pills no longer fit, the bar folds to a menu button that opens a drawer of the same sections. The header at the top of this page is one.
Sections and menus
Hover or focus Docs or Examples to open its menu, and press the down arrow on a focused pill to step into it. The current section takes the action colour, marked here on Pricing.
The fold
The bar measures itself rather than the viewport, so it folds exactly when its pills stop fitting, whatever the number of sections, the length of the labels or the room a docked panel leaves. Folded, the menu button opens a drawer of the same sections.
// From the npm package
import { SiteHeader } from 'rift-ds/components/SiteHeader/SiteHeader';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/site-header.json