Description
...
Left navigation consists of:
Up to 5 levels in the menu hierarchy.
Menu items, including:
Item labels, which can only be presented on one line.
Expand and collapse icons, to show where there are more levels in the menu hierarchy.
Each sub-level in the hierarchy will be indented to the right.
A grey line to separate 1st level items.
A blue marker is shown to the left of the selected item.
An expand or collapse icon in the top-right corner, allowing the user to switch between pinned and unpinned states.
A scroll bar for the open section of the menu.
...
Where there is more than 1 level, and the 1st level item does not link to a separate page, the first item at each sub-level will be selected.
By default, the left navigation panel is pinned open.
Internal logic
Left navigational operates similarly to an Accordion.
...
change the left navigation state from pinned to unpinned, or vice versa.
change the icon button from an expand arrow to a collapse arrow, or vice versa.
When unpinned: | When pinned: |
|---|---|
|
...
| |
 |  |
Transitions
Menu items will expand and collapse with a brief slide effect.
The left navigation panel will open and close with a brief slide effect.
When pinning or unpinning the left navigation, the content on the main area of the page will collapse or expand with a transition effect.
...