EDS – Equinor Design System

Navigation tabs

Tabs organise related content across different views to be quickly navigated.

Guidelines

Tabs allow for navigation between content that is related and has an equal hierarchy. Each tab’s content should be noticeably different from the other. Tabs allow for information to be presented in a space-saving layout.

Don’t

  • Do not use tabs to scroll down through long pages on sequential content.
  • Do not stretch a tab to be wider than 360px.
  • Do not wrap or stack tabs.
  • Do not change the height of the tabs.
  • Do not use less than two tabs.
  • Do not use tabs above imagery.
  • Do not use tabs at the bottom of a layout.
  • Do not nest a set of Tabs within another set of Tabs.

Variations

Active

FigmaExternal linkFigma design sketches active tab

Inactive

FigmaExternal linkFigma design sketches inactive tab

Disabled

FigmaExternal linkFigma design sketches of disabled tab

Width

Tabs have a minimum width of Spacer/16 - Medium on each side of the label. Tabs have a maximum width of 360px.

Tab width can be decided by three factors:

  1. The width of the space available being equally divided by the number of tabs. This method is only to be used for four tabs or less.
  2. The width of the widest tab determining the width of all the tabs to provide visual balance. This should be used with caution ensuring all tabs will be seen in smaller layouts.
  3. Each tab having its own minimum width to conserve space.

Horizontal scrolling tabs

Tabs that are wider than the space available are always swipeable/scrollable having a next and previous icon button for navigation.

Content

Labels

Tab labels should provide clear and concise direction. Note that if the label is longer than the maximum width it will be truncated and should have a tooltip provided.

Exceptions

If the Navigation: Navigation Drawer is not used, tabs may be used in the Navigation: Top Bar as the main navigation linking to unrelated pages.

✏️ Edit this page on GitHub