These demos focus on the cases that were brittle before the refactor: MenuItems rendered as links, MenuItems inside fragments, wrapped dividers, and conditional child trees that reorder after the menu has already resolved its active item.
This menu keeps the list semantics by wrapping link-rendered MenuItems in list items.
Open the menu and use the arrow keys. The plain anchor items and the Next.js-style link items should all participate in the same focus order.
This menu mixes MenuItems inside React.Fragment with a Divider wrapper that used to accidentally join the tab sequence.
Open the menu and use the arrow keys. The selected item should land on "Pin to right", both fragment groups should participate, and the divider wrapper should be skipped entirely.
This example inserts a fragment before the selected item while the menu is already open.
Open the menu, then toggle the extra block. Focus should stay anchored to "Reports" instead of jumping back to the start.
This example moves an entire keyed fragment from the top of the menu to the bottom while the menu is already open.
Open the menu and move the priority fragment. Focus should stay on "Duplicate" even as the block moves around it.