Sidebar menus

Usage

The sidebar menu organizes related content into categories and subcategories. In InsuranceSuite these links are displayed in the sidebar as menus.

Use the sidebar menu to enable users to move between categories.


Sidebar with Summary category expanded.
Sidebar with Loss Details category expanded.

PCF elements

Primary function

  • Menu Item
  • Menu Item Tree
  • Panel Column

Secondary function

No elements use this widget as a secondary function.

Best Practices

Hierarchy

  • Whenever possible, show no more than two levels at one time.
    Sidebar with two levels.
  • In cases where it is necessary to show more than two levels, indent the second and third levels to make the hierarchy clear.
    Sidebar with multiple levels and each level indented.
  • In InsuranceSuite, allow users to resize the sidebar to see the entire menu, as shown in the following screenshots:
    Tree Menu: Initial state Tree Menu: User resizing Tree Menu: After resizing

    Narrow sidebar with text cut off.
    Mouse dragging the sidebar edge.
    Wider sidebar showing all text.

Menu Labels

  • Name and organize the items in the sidebar based on user research. Consider a card-sort or other research methods to identify menu names and organization that best match users' expectations and work process.

  • Use title case for all menu labels that do not form a complete sentence.

  • Use sentence case for menu labels that form a complete sentence.

  • Icons can be optionally included in the sidebar. Refer to Designing new icons when designing new icons.