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.
|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.