Intro
These guidelines provide guidance on using Group Headers and submenus within the Menu (SAC) component.
When to Use Group Headers
Do
Use the group header:
- If there are more than 3 items in a menu.
- When you want to categorize a group of related menu items.
- When the menu includes a variety of content types.
Don't
Don't use a group header:
- If there are fewer than 3 items in a menu.
- If a category has more than 7 items, consider using a submenu instead.
- If a menu requires hierarchies with multiple subcategories or nested items. In this case, use a submenu.
Group Header Anatomy
- Header Text: Bold text used to identify a category of related items.
- Separator: Used to visually separate the group header from subsequent menu / list items.
Group header anatomy
Group Header Usage
Group headers categorize related menu items under a bold header, providing separation between the category and their items. This helps to clearly differentiate between interactive elements.
Group headers should not have a hover state but should retain a focus state to ensure accessibility for screen reader users.
Menu Group example, with two groups in a single menu
When to Use Submenus
Do
Use the submenu:
- When you want to organize a category into subcategories.
- If a category has more than 7 items.
- If a menu requires hierarchies with multiple subcategories or nested items.
Don't
Don't use a submenu:
- If there are fewer than 3 items in a menu.
Submenu Anatomy
- Icon (optional): Icon that visualizes the action triggered by the menu item, or indentation.
- Text: Describes the topic of its submenu.
- Trailing Action: Indicates an available submenu level.
Submenu anatomy
Submenu Usage
Submenus allow for additional levels of organization, breaking down categories into smaller, nested sections. Ideal for menus with many options or categories that need further breakdown in subcategories or additional options.
Submenu example – "Add" Menu