Icon rail
Slim icon rail with a sliding ember indicator, tooltips, hover/focus flyout panels of section links and a pinned docked state.
Preview
Hover or focus a key: the flyout opens
Projects
Pebble launch
Open
8
Review
3
Done
11
Pinned open
Projects
Pebble launch
Open
8
Review
3
Done
11
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| sections / footer | { id; label; icon; links?: { label; href; badge? }[] }[] | — / [] | Top and bottom keys. Keys with links open a flyout; others get a tooltip. |
| value / defaultValue / onValueChange | string / string / (id: string) => void | — / first / — | Current section (raised key with the ember bar). |
| pinned / defaultPinned / onPinnedChange | boolean / boolean / (pinned: boolean) => void | — / false / — | Dock the panel open beside the rail. |
| current | string | — | Href of the current page, marked in the panel. |
| label | string | "Main" | Accessible name of the navigation. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.