Shrink header
Site header that shrinks continuously with the scroll from a tall bar with a large mark to a compact frosted bar, hides on scroll down, reveals on scroll up and underlines the section being read.
Preview
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| container | RefObject<HTMLElement | null> | page | Scroll container the header sits at the top of; the window when omitted. |
| logo / brand | ReactNode | — | Brand mark (scales down as it shrinks) and name; the link scrolls to the top. |
| links | { id: string; label: string }[] | [] | Section links with scroll-spy and a sliding underline. |
| actions | ReactNode | — | Controls on the right. |
| expandedHeight / compactHeight | number | 96 / 56 | Heights at the top and once shrunk. |
| hideOnScroll | boolean | true | Hide on scroll down, reveal on scroll up. |
| label | string | "Main" | Accessible name of the navigation. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.