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.
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:
- Use sentence case throughout. Only capitalize the first word and proper nouns.
- Use the Oxford comma. The Oxford comma precedes the conjunction in a list.
- Refrain from using all-caps, exclamation marks, and ampersands.
- Reference the word list for spelling and formatting conventions.
- Follow the appropriate QuickBooks’ voice and tone attributes for the overall experience.
