Flyout Menu

Derived from a popover, the flyout menu features drill-down/nested capabilities for menus and lists.

Usage


Place Keyboard Shortcuts in Final Location

Do
Cascading menu with submenu opened from selected option.

Apply keyboard shortcuts to final items in hierarchy only.

Don't
Cascading menu showing nested submenu aligned to selected parent option.

Avoid displaying any right-aligned labels alongside the right-sided arrow.

Trigger Menus with Hover Only

Do
Cascading menu with multiple options each indicating available submenus which open upon hover.

Maintain consistency by ensuring all flyout menus reveal on hover.

Don't
Cascading menu with pointer selecting an option that opens a submenu upon click.

Avoid using a click to reveal menu items. This will conflate expected behavior and slow down the overall interaction.

Limit Deep Menus

Do
Cascading menu with only one submenu level.

Limit hierarchy to provide easier navigation. Consider the grouping of sub-items and determine if they can pair next to a group that exists on a "higher" level.

Don't
Cascading menu with two submenu levels.

Avoid creating deep menus as those can lead to user confusion and trouble locating options. It also increases the chance of closing the menu unintentionally if mouse movements are imprecise.