Cascading Menu
Organize complex actions into nested levels. Hover over an item to reveal a submenu of related options. Useful for keeping your main menu clean while offering deep functionality.
Concept: A Cascading (or Nested) Menu allows you to tuck away secondary options under a parent item. This is similar to the "Share" or "Open With" menus you see in desktop applications. It keeps the primary menu short and easy to scan.
Nested Submenus
Use DropdownSub, DropdownSubTrigger, and DropdownSubContent to create nested levels of navigation. Can be nested recursively.
1import {2 Dropdown,3 DropdownTrigger,Installation
npx zeroui@latest add dropdown-cascadingProps
Props
| name | type | default | description |
|---|---|---|---|
| DropdownSub | Component | - | Wrapper for the submenu specific state. |
| DropdownSubTrigger | Component | - | The item that toggles the submenu. Includes an automatic chevron icon. |
| DropdownSubContent | Component | - | The container for submenu items, automatically positioned to the right. |