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.

Standard Overlays & Menus · React · Subscription · commercial licence · v1.0.2 · updated 2026-10-15 · Live demo

Install

velocityx add standard-nested-submenu-menu

Subscription component. Run velocityx login with your key first — get one.

---
import NestedSubmenuMenu from '../components/velocity/standard-nested-submenu-menu/NestedSubmenuMenu.jsx';
---
<NestedSubmenuMenu client:visible />

Props

Prop	Type	Default	Description
label	string	'Menu'	—
items	array	[]	—
open	—	—	—
defaultOpen	boolean	false	—
onOpenChange	—	—	—

Files written

velocityx drops these into your project:

• components/velocity/standard-nested-submenu-menu/NestedSubmenuMenu.jsx

Peer dependencies

react — nothing else. Zero external dependencies is the point.

Theming

Colours come from the primary-* / accent-* Tailwind scales, so this drops into a project that is not Velocity without dragging our brand in. Install the contract once:

velocityx theme

Then set your whole brand in one place — raw RGB channels, not hex (a hex here silently breaks every opacity variant):

:root {
  --vx-brand: custom;
  --vx-primary-600: 220 38 38;
}

There is no component-level font-family anywhere in the library — your font cascade wins.

Licence

Commercial, for the duration of an active Velocity X subscription. The source is served by the licence-gated endpoint, never by the public CDN.