CleenUI · Navigation · Menu

Menu

Generic menu primitive used by Sidebar, Popover, and dropdowns — keyboard-navigable, accessible.

storybook.cleenui.com · navigation-menu--default
Open in new window

About Menu

Menu is the lower-level menu primitive that powers many higher-level components. Configure menu items, sections, dividers, and keyboard shortcuts; the component handles arrow-key navigation, escape-to-close, and ARIA roles correctly.

Nested submenus are supported, with consistent open-on-hover-or-click behavior. Menu items can include icons, keyboard shortcut hints, and right-side meta indicators.

When to use it

  • Dropdown action menus on tables and lists.
  • Right-click context menus.
  • User-account menus in nav bars.
  • Filter and sort menus in data views.

Common props

Prop
Type
Description
items
MenuItem[]
Menu items (with nested submenus).
trigger
ReactNode
Optional trigger when used standalone.
onSelect
(item) => void
Fires when an item is selected.
size
"sm" | "md"
Item size and spacing.
renderItem
(item) => ReactNode
Custom item renderer.
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

1
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.

Live demo

See CleenUI running before you talk to us.

Configure a demo environment in about twenty seconds — theme, spacing, the modules you care about, sample data for your industry — then launch the full dashboard in your browser. Nothing to install, no signup.

  • 20 sec setup
  • 15 themes
  • 20 modules
  • 80 industries
Pick a theme to start with