Nav Tabs

Nav tabs function in the same way as the tab component but are more focused on navigation across pages or links.


Nav tabs organize and allow navigation across different pages of content that are related and at the same level of hierarchy. They are commonly used in the header of a page.

  • Use nav tabs for page or site navigation when dividing content into different pages. Please take into account the site navigation as the main difference between nav tabs and regular tabs in order to use them.
  • The content should follow an organized structure and hierarchy.
  • Text labels should be brief and clearly related to the content.

For general tabs usage, refer to the tabs usage section.

Nav tabs can be used both to navigate within a page as well as to external pages and links. The image below illustrates that a combination of internal and external links can be used together:

Nav tabs navigation