Navigation item

Also known as

Nav Item, Link, App button, Header item

NavigationItem allows users to navigate between distinct applications and website pages.

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, or Link 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:

NameTypeDescriptionDefault