Flyout submenu
The second menu that pops out sideways when you hover, click, or arrow into an item that has more choices.
See it
What it is
A flyout submenu is a second menu that opens beside a parent item, usually to the right, revealing one deeper level without replacing the current menu. The small chevron on the parent is the clue that it opens another branch. Desktop application menus have used this cascading pattern for decades: the macOS menu bar and the Windows Start menu both open their branches sideways.
Reach for one when a compact menu contains a real hierarchy, such as File, Export, then a list of formats. Keep the nesting shallow and the groups predictable. If people must explore several branches to find a destination, a tree view or a full navigation page gives them more room and keeps the structure visible.
Gotcha: the pointer has to travel diagonally from the parent into the child, crossing space that may belong to another item. Closing the submenu immediately causes maddening flicker. Use a short delay or a safe pointer polygon, flip the panel when the viewport edge is near, and support click, touch, Escape, and arrow keys rather than relying on hover.
Ask AI for it
Build a two-level flyout submenu with Floating UI. Mark parent items with aria-haspopup='menu' and aria-expanded, position the child with useFloating() plus offset(), flip(), and shift(), and use safePolygon() so diagonal pointer travel does not close it. Open on click and Right Arrow, close on Escape and Left Arrow, move focus through items with Up and Down arrows, and return focus to the parent when the child closes. Add a 150ms pointer grace delay and a visible chevron, and never require hover.