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
| Property | Value(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 items | 0px | - |
Usage
Alignment
Horizontal navigation at the top of a section or page can have one of the following two alignment options:
Center Aligned
Use this type of alignment when there are no space constraints.
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.
