Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Description

...

Otherwise, use Top Navigation.

Structure

?

  • Left navigation can have up to 3 levels.

  • Item labels can only be shown on one line.

  • Expand and Collapse icons indicate more levels in the menu hierarchy.

  • Each sub-level in the hierarchy is indented to the right.

...

  • Left navigation is shown in a left-hand panel, which can be collapsed.

  • The panel has a fixed width of x.

Note: Left navigation cannot be used in conjunction with the Filter Pane.

...

  • Left navigational operates as an Accordion:

    • Only one item for each level can be expanded at a time.

    • Scroll should operation operate within the last level only.

Interactions

  • The left navigation can be expanded and collapsed, include hover and pin states (these aren't included in the drawings).

  • Only one item for each level can be expanded at a time.

  • The current selection is marked with a blue marker on the left (in either any hierarchy level).

  • If a 2nd or 3rd level item is selected, when collapsed the top level item will be marked.

  • On selecting another a different item, the user will be redirected to the new page.

  • For items with sub-levels, selecting the item will only open the next level, without redirecting to a new page. Only after selecting an item from the next level will the user be redirected to a new page.

...