Navigation item
Navigation item
NavigationItem
allows users to navigate between distinct applications and website pages.
Examples
How to use
Accessibility
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 |
---|