Navigation item
Navigation item
NavigationItem
allows users to navigate between distinct applications and website pages.
Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected
For further details on how to use the component to provide navigation, see the navigation pattern
- When you have multiple levels of navigation in your application or website.
- We suggest first considering a horizontal group of navigation items for distinct webpages or applications. If you have multiple (more than eight) services to navigate to at a platform level, or have navigation across distinct apps, consider using a vertical group instead.
- If you need your items to remain visible on scroll, we recommend displaying navigation items in a fixed app header (or header area).
- When you need to show different views of content within the same page. Instead, use
Tabs
. - When your content is very specific. In this case, a minimalistic or single-page design may be more appropriate than a complex navigation structure. Instead, use
InteractableCard
, orLink
within the body of the page.
- To make the most of screen real estate, our recommendation is that all description text should be clear and concise.
- Always write descriptions in sentence case in a navigation item.
- When using a navigation item component within a navigation item, we recommend using sentence case.
- In a horizontal navigation item, do not wrap descriptions, use truncation with
Tooltip
if necessary. - In a vertical navigation item, descriptions can wrap onto multiple lines if necessary, and is preferred over truncation.
To import NavigationItem
from the core Salt package, use:
Name | Type | Description | Default |
---|
For further details on how to use the component to provide navigation, see the navigation pattern
- When you have multiple levels of navigation in your application or website.
- We suggest first considering a horizontal group of navigation items for distinct webpages or applications. If you have multiple (more than eight) services to navigate to at a platform level, or have navigation across distinct apps, consider using a vertical group instead.
- If you need your items to remain visible on scroll, we recommend displaying navigation items in a fixed app header (or header area).
- When you need to show different views of content within the same page. Instead, use
Tabs
. - When your content is very specific. In this case, a minimalistic or single-page design may be more appropriate than a complex navigation structure. Instead, use
InteractableCard
, orLink
within the body of the page.
- To make the most of screen real estate, our recommendation is that all description text should be clear and concise.
- Always write descriptions in sentence case in a navigation item.
- When using a navigation item component within a navigation item, we recommend using sentence case.
- In a horizontal navigation item, do not wrap descriptions, use truncation with
Tooltip
if necessary. - In a vertical navigation item, descriptions can wrap onto multiple lines if necessary, and is preferred over truncation.
To import NavigationItem
from the core Salt package, use:
Name | Type | Description | Default |
---|
For further details on how to use the component to provide navigation, see the navigation pattern
- When you have multiple levels of navigation in your application or website.
- We suggest first considering a horizontal group of navigation items for distinct webpages or applications. If you have multiple (more than eight) services to navigate to at a platform level, or have navigation across distinct apps, consider using a vertical group instead.
- If you need your items to remain visible on scroll, we recommend displaying navigation items in a fixed app header (or header area).
- When you need to show different views of content within the same page. Instead, use
Tabs
. - When your content is very specific. In this case, a minimalistic or single-page design may be more appropriate than a complex navigation structure. Instead, use
InteractableCard
, orLink
within the body of the page.
- To make the most of screen real estate, our recommendation is that all description text should be clear and concise.
- Always write descriptions in sentence case in a navigation item.
- When using a navigation item component within a navigation item, we recommend using sentence case.
- In a horizontal navigation item, do not wrap descriptions, use truncation with
Tooltip
if necessary. - In a vertical navigation item, descriptions can wrap onto multiple lines if necessary, and is preferred over truncation.
To import NavigationItem
from the core Salt package, use:
Name | Type | Description | Default |
---|