Dropdown Flyout

The dropdown flyout allows for additional menu items to be nested within parent items, which allows more menu options for users.
Demo and Developer Guidelines

Anatomy

The dropdown flyout menu is launched from a menu under a button, overflow, dropdown, etc. They can contain multiple levels of menu options and can be customized according to the guidelines below.

Placement

Depending on where the button is on the page, the flyout menu can be displayed to the left or the right of the menu. For example, if a menu is very close to the right side of the page, the flyout will display on the left.
When the menu is closer to the left side of page, display the dropdown flyout menu to the right.
When the menu is closer to the right side of page, display the dropdown flyout menu to the left.

Behavior

Specifications