Flyout menus are temporary navigation tools that users reveal when they interact with a button, action, or other control. Flyout menus allow users to access a list of choices or actions.

When to use flyout menus

Flyout menus contain actions and content that users may need to navigate or change their view. 

Use flyout menus when you need to: 

  • Display a list of options temporarily
  • Display non-primary (overflow) content or actions
  • Display navigation between in-product views and pages

Flyout menus often index “Create” functions or “Settings.” 

In-page flyout menus come from icon controls that contain component- or element-specific, page-level actions or settings. 

Product header flyout menus can allow users to access their profile, account settings, account-level actions, and more.

Left nav flyout menus are shortcuts to secondary navigation. We recommend you only use flyout menus if secondary navigation is also present.

 

What flyout menus look like

Flyout menu sizes depend on the grid columns. Columns differ depending on the column system.

Flyout menus appear when users select an icon or action and disappear on the off state. 

Default flyout menus have no caret. 

Use flyout menus with carets when there is no active visual, button, action, or control. For example, flyout menus inside trowsers may have carets.

An in-page flyout menu for filtering transactions inside QuickBooks Online

An in-page flyout menu with a caret
Special case: A flyout menu with a caret

Mobile appearance

We don’t recommend using flyout menus in the mobile experience because they don’t support a user-friendly experience. We recommend replacing the interaction with a modal dialog with a scrim.

 

 

How flyout menus behave

Icon controls initiate in-page flyout menus.

Flyout menus should appear alongside, above, or below the element that initiates it. If a browser or screen edge cuts off a flyout menu, it may appear to the left or right or above the element that initiates it. 

Dismiss flyout menus when the initial action is no longer present due to a resized browser.

There should only be one flyout menu active at a time.

To close flyout menus, select outside of the container or element the flyout is attached to.

Mobile response

We don’t recommend using flyout menus in the mobile experience because they don’t support a user-friendly experience. We recommend replacing the interaction with a modal dialog with a scrim.

 

Content guidelines

Align your content with the Intuit content design style guide, including the following:

  1. Use sentence case throughout. Only capitalize the first word and proper nouns.
  2. Use the Oxford comma. The Oxford comma precedes the conjunction in a list.
  3. Refrain from using all-caps, exclamation marks, and ampersands.
  4. Reference the word list for spelling and formatting conventions.
  5. Follow the appropriate QuickBooks’ voice and tone attributes for the overall experience.
  • Was this Helpful?
  •