Jump Menu
FreeCompact navigation as a single native select: grouped destinations, the current one shown, and the platform picker on touch. The small form of a tab strip or an anchor rail.
</>sv-jump-menu jump menunavigationselectmobilesectionsresponsive
import { SvJumpMenuComponent } from '@styloviz/jump-menu';Demo & usage
Basic usage
Usage example — open the gallery for the full interactive demo.
An interactive demo for this component lives in the gallery.
Open live demoMore examples
Grouped destinations
example.htmlAngular
1 lines
<sv-jump-menu [items]="sections" label="Jump to section" />
Compact, in a toolbar
example.htmlAngular
1 lines
<sv-jump-menu [items]="sections" size="sm" [labelHidden]="true" />
The small form of a tab strip
example.htmlAngular
7 lines
<!-- Below the breakpoint, swap the strip for the menu. Both read the same state, so nothing is duplicated. --> @if (narrow()) { <sv-jump-menu [items]="asDestinations()" [(value)]="activeTab" /> } @else { <sv-tabs [tabs]="tabs" [(activeId)]="activeTab" /> }
When to use
- A row of destinations does not fit — on a phone, in a toolbar, or in a narrow sidebar.
- You want one control that shows where you are and moves you somewhere else.
- For a persistent row of peers with room to breathe, use Tabs; for in-page sections with room, use Anchor. This is what either becomes when the room runs out.
Async states
None — this component has nothing to load, so it has no loading, empty or error state to drive.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| items | readonly JumpMenuItem[] | [] | Destinations, in display order. |
| value | string (two-way) | '' | Id of the current destination. Use `[(value)]` for two-way binding. |
| label | string | 'Jump to' | Visible label above the control. Not optional in practice: a bare `<select>` in a navigation bar reads as *"combo box, Overview"* and nothing tells a screen-reader user it moves them. |
| labelHidden | boolean | false | Hide the label visually, keeping it for assistive technology. |
| size | JumpMenuSize | 'md' | Control size. |
| disabled | boolean | false | Prevents any destination from being chosen. |
| placeholder | string | 'Select…' | Text for the placeholder option shown while `value` matches no destination. Empty string removes the placeholder entirely. |
| customClass | string | '' | Additional CSS classes on the root wrapper. |
Outputs
| Event | Payload type | Description |
|---|---|---|
| jump | JumpMenuChangeEvent | Emitted whenever a destination is chosen — always, because a `<select>` is not a link and the browser was never going to navigate. See the class note. Fires on every `change`, which on Windows includes each arrow key pressed on the closed control (WCAG 3.2.2) — see the class note for the tradeoff. |
| valueChange | string | Emits the new `value` whenever it changes — the output half of `[(value)]`. |
Customization & theming
- Three sizes: sm, md, lg.
- Grouped destinations via `optgroup` — consecutive items sharing a `group`.
- A placeholder while `value` names nothing, or none at all.
- Navigates through `SvLinkAdapter` when a destination carries an `href`; otherwise the host handles `jump`.
Best practices
- Do: Keep the destinations in document order. An ungrouped item stays in its place in the sequence rather than being swept to the end, because the control's idea of "next" has to match the page's.
- Do: Give it a `label`. A bare select in a navigation bar reads as "combo box, Overview", and nothing tells a screen-reader user that choosing an option moves them. Use `labelHidden` if it cannot be seen.
- Tip: It is a native `<select>` on purpose: on touch that means the OS picker — a wheel on iOS, a dialog on Android — plus the platform's own font scaling and accessibility settings, with none of the kit's JavaScript in between.
- Don't: Don't use it where a row of tabs already fits. A control that hides its options is worse than one that shows them when there is room to show them.
Accessibility
- A native `<select>`, so keyboard, screen-reader and platform-picker behaviour are the browser's rather than the kit's.
- The label is a real `<label for>`, kept for assistive technology even when visually hidden.
- Groups are real `<optgroup>` elements, announced as groups.
- A disabled destination is a disabled `<option>`, skipped by keyboard and refused by the component.
Feedback on Jump Menu
Spotted a gap in this page, or something that didn't work as described? Comments are GitHub Discussions in the public styloviz/community repo, so posting needs a GitHub account.