Overview
The Navigation Menus help BTP tools scale their navigation needs on all devices for desktop and mobile. Navigation Menus are dropdown and popover containers showing navigation options when the space is limited. Such examples are child navigation for the Horizontal Navigation variant and overflow navigation for the Snapped Vertical Navigation variant.
Look and Feel
When To Use
Recommended
- Use Navigation Menus to show child navigation items.
- Use Navigation Menus to show parent navigation items in case of overflow.
Not Recomended
- Avoid using more than one cascading menu. Favor long menu over a deep hierarchy.
See also:
Anatomy
Popover Container
A popover is one of the container options for menus. Besides holding Menu Items, the popover allows placing additional content in headers and footers.
- Use a header for popover menus.
- Don't cascade popovers. Use dropdowns instead.
- Don't use popovers for contextual menus.
- Don't use Parent Menu Items in contextual menus.
Dropdown Container
A dropdown is the other container option for menus.
- Use dropdowns for cascading menus.
- Only place menu items in Navigation Menus.
- Don't mix Parent and Child Menu Items.
- Don't use separators or dividers.
Title (Optional)
Using a title in navigation menus is a great way to inform users of the context of the available navigation options.
- Write short titles that describe the context
- Don't use subtitles in Navigation Menus.
- Don't use actions in Navigation Menus.
Parent Menu Item
Parent Menu Items are preferred when used inside Popover containers. They are designed as attention grabbers and are visually more potent and decorated with icons. Parent Menu Items are typically used only on high-level triggers like the Tool Header Buttons, User Menu, Settings, etc. Visually the Parent Menu Items are based on the Navigation Items.
Parent Menu Item - Visual States
- Use in Popover containers.
- Use an icon.
- Don't use in dropdown containers.
- Don't show both selection and children indicators.
- Don't ass shortcuts to menu items.
Child Menu Item
Child Menu Items are preferred when used inside Dropdown containers. They are subtle lists of available navigation options and are visually less demanding. Child Menu Items have no decorations or icons and appear in cascading menus and navigation dropdowns. Visually the Child Menu Items are based on the Child Navigation Items.
Parent Menu Item - Visual States
- Use in Dropdown containers.
- Don't show both selection and children indicators.
Responsiveness
Tablet Behavior
Menus on tablets behave just as they do on any desktop device. Of course, they are larger to allow for touch interactions.
Phone Behavior
For the most part, the behavior on tablets and phones is identical. The only difference is when interacting with cascading menus. In such cases, the child cascading menus display a title and a back button to let users navigate back to parent items. In addition, the size of the Popover or Dropdown containers resizes to accommodate the new content. Note that the horizontal size cannot exceed the maximum width of the device. If the width is insufficient, the item's text will truncate.
- Display titles on cascading menus
- Display back button on cascading items
- Don't use too many levels of hierarchy
Resources
Design
Leave Feedback
We want to make our toolkit better. If you're interested in providing feedback, please use the commenting feature in the Figma file link in the button below.