Navigation - Horizontal

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

Usage
Code
Interactions

Horizontal navigation helps the users to quickly move among different pages in a module. It is typically found at the top of a section/page e.g. in the page header.

Variants


Default

This variant consists only of a label.

With Icon

This variant consists of an icon and a label.

With Count

This variant consists of the pill component and a label. The pill component helps display the count involved in a navigation item.

Properties

PropertyValue(s)Default value
Height (of a nav item)32px-
Corner radius (of a nav item)16px-
Margin (of a nav item)
(top, right, bottom, left)
0px, 1px, 0px, 1px-
Spacing between nav items0px-

Usage


Alignment

Horizontal navigation at the top of a section or page can have one of the following two alignment options:

  • Center Aligned
  • Left Aligned

  • Center Aligned

    Use this type of alignment when there are no space constraints.

    Center aligned

    Left Aligned

    Use this type of alignment when there is a space constraint. Often times there is not much space available in a component e.g. in modals, side sheets, etc. In such cases, horizontal navigation comes just below the header.

    Left aligned