Standard Overlays & Menus
Nested Submenu Menu
Dropdown menu whose items open child menus of their own, any number of levels deep — a 'File > Export > Image' pattern. Up/Down traverse the current level, Right opens a submenu and focuses its first item, Left closes it and returns focus to the parent item, Escape closes every open level at once. Each submenu flips to the opposite side when it would render off the viewport edge.
$ velocityx add standard-nested-submenu-menu
Built for react.
Needs react already installed
as a peer dependency.
An Astro-only project needs @astrojs/react wired up first — this won't run on its own in plain Astro.
Full docs for Nested Submenu Menu →
Needs a licence key —
subscribe here, then
velocityx loginonce.
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| label | string | No | 'Menu' | |
| items | array | No | [] | |
| open | undocumented | Yes | ||
| defaultOpen | boolean | No | false | |
| onOpenChange | undocumented | Yes |
3 fields in this table have an undocumented type — see source for the exact shape.
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/standard-nested-submenu-menu/NestedSubmenuMenu.jsxUsing the Nested Submenu Menu component
Install it with velocityx add standard-nested-submenu-menu.
The CLI writes the source straight into your project — no runtime dependency, no registry
lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.
Related components
More from Standard Overlays & Menus.
Confirmation dialog with least-destructive initial focus, async action support, Escape cancellation, and focus restoration.
reactA small marker pinned to a live element to flag something new or needing attention, that opens its explanation on click rather than hover. The badge itself persists until the user explicitly dismisses it, so a flagged field stays flagged until actually read, not until the cursor happens to pass over it.
reactMobile data-entry sheet with three drag snap points — peek, half and full — so the page stays reachable behind it instead of a full-screen takeover. Drag by pointer or step by keyboard, Escape to close, focus returns to the trigger.
reactOne step of a product walkthrough — a spotlight ring that tracks a live target element, a callout card with a step counter and Next/Back/Skip, fully keyboard operable. Escape always exits the whole tour, never just the current step, so a new user is never stuck in a walkthrough with no way out.
react