Floating nav
Navigation that hides on scroll down and returns on scroll up as a compact floating pill naming the current section, morphing between full bar and pill.
Preview
Live · scroll down, then up
Held compact (forceCompact)
Pricing
$24 per seat, billed monthly. Every plan includes 2 TB.
Starter$12
Team$24
Studio$39
Changelog
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id: string; label: string }[] | — | Sections in page order; id is the section element's id. |
| brand / compactBrand | ReactNode | — / brand | Brand in the full bar, and the (usually mark-only) brand in the pill. |
| action | ReactNode | — | Right-hand action, shown in both shapes. |
| container | RefObject<HTMLElement> | — | Scroll container to watch. Defaults to the window. |
| threshold | number | 80 | Scroll px under which the full bar always shows. |
| offset | number | 96 | Px from the top at which a section becomes current. |
| forceCompact | boolean | false | Hold the compact pill regardless of scroll; keyboard focus still opens the full bar. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.