Description
- Secondary navigation uses a family of navigation items to allow users move through your product. These can be:
- standard navigation items that open new pages, or
- parent navigation items that open a list of child navigation items.
- Child items can open:
- new pages related to the parent, or
- a submenu of grandchild items (only in vertical navigation).
Anatomy
Horizontal
Vertical
Size
Secondary navigation is available in M size only.
Types
There are two navigation types to choose from.
Horizontal
Horizontal navigation is recommended for applications where:
- horizontal space is at a premium, or
- legacy page layout support is required. For example, Sage Accounting and Payroll.
Large screen
Medium screen
Small screen
Vertical
Vertical navigation is recommended for new applications, because:
- the upcoming suites navigation pattern is likely to adopt a similar layout.
- this layout also easily facilitates responsive designs.
Large screen
Small screen
Overlay child menu
Variations
Navigation item variants
Dos and don'ts
Do
Don't
Best practices
- Use elevation (shadow) when the user scrolls vertically and the content moves under secondary navigation.
- Use child menus to group items related to the parent topic. But remember that extra clicks can frustrate users.
- Use manual activation for secondary navigation. The list of menu items is displayed only when a user selects the parent menu item using Space or Enter on the keyboard, or a mouse click.
- Use different words to label each list item in a menu so that it's easy to scan.
- Start with the action. For example, Create invoice.
- Use labels with or without icons. It's not recommended to use icons without labels.