Submenu vs. Cascader vs. Drill-Down Menu

/ aria-haspopup="menu" · DropdownMenu.Sub /

also called cascading menu, flyout menu, nested menu, multi-level menu, cascade select, sliding menu

“A menu option with an arrow that opens a second menu” is a submenu (Radix DropdownMenu.Sub): pointing at the row with a chevron at its right end opens the next menu beside it. A cascader (Ant Design Cascader) does the same inside a form field, adding a column per pick, and the closed field then shows the whole path, like “Europe / France / Paris”. A drill-down menu replaces the list in place instead, with a back row on top, the way phone menus do. Finder's window-sized columns are Column View; a filter builder and a country-then-state pair of selects are different controls.

If you called it…

“a menu option with an arrow that opens a second menu beside it”“in the dropdown having an arrow to the right, and when clicked it's showing a dropdown of that option”“side-by-side lists in a dropdown where each pick opens the next list”“the field that shows every level you picked, separated by slashes”“the phone menu where tapping an item slides in the next list with a back button on top”“pick a continent, then a country, then a city from one dropdown”

…you meant Submenu vs. Cascader vs. Drill-Down Menu.

Anatomy — every part, named

1
Submenu indicator (chevron)aria-haspopup="menu"
“The arrow to the right in the dropdown” is the submenu indicator, and its row stays highlighted while its submenu is open.
2
Submenu panelDropdownMenu.SubContent
“The second menu that pops out to the side” is the submenu panel, which lines up with the row that opened it and stays open while the pointer crosses over to it.
3
Path in the fielddisplayRender
“The box that shows every level I picked” is the cascader's path value, with “ / ” between the levels.
4
Cascade columnoptions[].children
“The next list that appears to the right” is a cascade column, one per level, with the picked item tinted in each.
5
Back row.js-drilldown-back
“The top row that takes you back” is the back row: a left chevron and the name of the list you are in, above the drilled-down items.

Prompt — paste into your agent

Build the multi-level menu that fits the job: a submenu (Radix DropdownMenu.Sub) whose row ends in a chevron and opens the next menu beside it; a cascader (Ant Design Cascader) with one column per level and the picked path in the closed field as "A / B / C"; or, on phones, a drill-down that slides the next level in under a back row. For website navigation use disclosure buttons, not role="menu".

Debug prompt — when it misbehaves

Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.

Debug my multi-level menu (Radix DropdownMenu.Sub, Ant Design Cascader, a drill-down drawer). Rule out: the submenu closing when the pointer cuts diagonally across another row on its way over; the submenu clipped by an overflow: hidden ancestor instead of rendered in a portal; the submenu opening off the right edge of the screen with no flip to the left; hover-only opening that never works on touch; Right Arrow not moving focus into the submenu; the cascader dropping its later columns when a parent is picked again; hidden drill-down levels still focusable; the slide still running under prefers-reduced-motion. The symptom:

In code

The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).

ARIA	`aria-haspopup="menu"`	on the row that opens a submenu
Radix	`DropdownMenu.Sub`	with SubTrigger and SubContent
shadcn/ui	`<DropdownMenuSub>`
Ant Design	`<Cascader options={…} />`	one column per level; the field shows the path
Foundation	`data-drilldown`	a slide-in drill-down; no release since 2024

If you called it…

Anatomy — every part, named

Prompt — paste into your agent

Debug prompt — when it misbehaves

In code

See also