Navigation - Vertical

Vertical navigation helps the users to quickly move among different pages in a module.

Usage
Code
Interactions

Vertical navigation helps the users to quickly move among different pages in a module just like the horizontal navigation. The key difference here is that the navigation items are laid out vertically and hence there is virtually no limit on the number of navigation items to be displayed.

Types


Flat

Rounded

Rounded variant comes handy when the navigation is not at the extreme left. Hence the left part of the selected navigation item is rounded and not flat.

Properties

PropertyValue(s)Default value
Width of panel256px-
Height (of a nav item)36px-
Width (of a nav item)Auto-
Panel collapse/expand action iconkeyboard_arrow_left/
keyboard_arrow_right icon
-
Section
(optional)
<section title>-
Icon
(optional)
<icon name>-
Icon size16x16px-
Count (in parent)*
(optional)
<count>-
Count (in child)
(optional)
<count>-

Note: Count in parent item is supported only when it does not have children.



Usage


Maximum levels

To reduce the unnecessary visual clutter, a maximum of two levels are supported in the vertical navigation. If more than two levels are needed, one can use tabs, horizontal navigation, or secondary navigation inside the page.


Collapsing a panel


Parent Item - Without Icons

The panel cannot be collapsed when the parent items do not have icons.

Parent Item - Without Icons

Parent Item - With Icons

Parent Item - With Icons

Child Item - Without Icons

In this case, the panel will collapse to the icons of the parent items. In the collapsed view, the parent having the selected child will be shown as active.

Child Item - Without Icons

Child Item - With Icons

The icons of children will be visible in the collapsed panel only if the parent was initially expanded.

Child Item - With Icons

Hover on collapsed panel

Hovering over the collapsed panel expands it in overlay mode.

Scrolling when the nav overflows

The toggle panel button is differentiated with a shadow and a divider if the content inside the nav panel becomes scrollable.

Scrolling when the nav overflows

Grouping

It is possible to group navigation items into categories. Grouping is restricted to the parent level, to keep the navigation simple.

Parent Item - Without Icons

Example 1:

As the parent items do not have icons, the panel will be non-collapsible.

Parent Item - Without Icons

Example 2:

As the parent items do not have icons, the panel will be non-collapsible.

Parent Item - Without Icons

Parent Item - With Icons

In this case, the section title and the subsequent divider will disappear when the panel is collapsed.

Parent Item - With Icons

Secondary nav panel

The width of the nav items here will be decided on the basis of the grid that the particular screen size supports.

Just like the primary navigation panel, the secondary navigation panel also supports up to two levels of navigation.

The secondary panel will be non-collapsible for all the cases.


Inside a Card

If the secondary navigation panel is used inside a card, the nav items used will be having a flat left edge.

Floating Panel

If the secondary navigation panel is floating, the nav items used will be having rounded edges.

Note: The width of nav items here is derived based on the grid.


Expand/Collapse Parent Item

Clicking over the collapsed parent item for the first time will expand the particular parent item. Clicking again will collapse the parent item.

Collapsing the parent item Expanding the parent item

Note: If a parent item having an active child is collapsed then after collapsing, the parent will be in the active state.


Custom Panel

The navigation panel can be customized to accommodate content other than the navigation items. In case of collapsing such panel, only the collapsed navigation items will be shown.

Custom panel

Dynamically adding a new item

Navigation items can be added dynamically to the panel on the go. Add item component always appears in the bottom.