Horizontal navigation helps the users to quickly move among different pages in a module.
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.
This variant consists only of a label.
This variant consists of an icon and a label.
This variant consists of the pill component and a label. The pill component helps display the count involved in a navigation item.
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 | - |
Horizontal navigation at the top of a section or page can have one of the following two alignment options:
Use this type of alignment when there are no space constraints.
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.