Tab GroupReady

Tab Group allows multiple panels to be contained within a single window, using tabs as a navigational element.

Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
View RTL
<nord-tab-group label="Title">
  <nord-tab slot="tab">Overview</nord-tab>
  <nord-tab-panel>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi voluptatibus, culpa
      explicabo voluptate maxime a, cumque ea reprehenderit ad consequuntur veniam? Fuga impedit iste tenetur.
    </p>
  </nord-tab-panel>
  <nord-tab slot="tab">Terminals</nord-tab>
  <nord-tab-panel>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi
      numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.
    </p>
  </nord-tab-panel>
  <nord-tab slot="tab">Stores</nord-tab>
  <nord-tab-panel>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, aperiam doloribus. Dolore, eaque. Distinctio
      consequatur alias quae commodi praesentium recusandae libero, voluptate veniam. Commodi, velit ad ex sequi ut
      fugit?
    </p>
  </nord-tab-panel>
</nord-tab-group>

Properties

PropertyAttributeDescriptionTypeDefault
labellabel

Adds an accessible label to the tab list container.

string""
paddingpadding

Controls the padding of the tab group component.

"m" | "l" | "none" | undefined"m"
stickysticky

Whether the tab list sticks to the top of the tab group as you scroll.

booleanfalse

Slots

Slot nameDescription
Default slot

The element which contains the content to be revealed.

tab

The element which contains all tabs to reveal tabbed content.

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

PropertyDescriptionDefault
--n-tab-group-padding

Controls the padding around the tab group (including the tab list), using our spacing tokens.

0

Dependencies

This component is internally dependent on the following components:

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Do #

  • Use to allow multiple panels to be contained within a single window.
  • Use the tab panel and tab components within the tab group component.
  • Use the tab and tab panel components in order to create a tab group content structure.

Don’t #

  • Don’t use tabs to navigate to other pages. Use navigation or links instead.
  • Don't use other components to the tab and tab panel within the tab group component.
  • Don't obscure important information within a tab panel that isn't revealed by default.
  • Don't add a tab or tab panel component without providing an accompanying panel or tab.

Content guidelines #

When writing tab labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

My tasks
My Tasks

Avoid unnecessary words and articles in tab labels, such as “the”, “an” or “a”:

Dashboard
The dashboard

Avoid ending tab labels in punctuation:

Patients
Patients.

Use as few words as possible to describe each tab label:

Payments
Payments in your clinic

Avoid all caps for tab labels:

Dashboard
DASHBOARD

Additional considerations #

  • If the content contained within the tabs UI has significance or is important for the user to see, consider using a different form of presentation that doesn't obscure it.
  • If there is a particular tab panel you wish to show out of order of the tabs UI itself consider using the selected option on the tab component related to the panel to select the tab but prevent the order of the tabs being affected.

Integration

For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines

Troubleshooting

If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.

Was this page helpful?

YesNoSend feedback

We use this feedback to improve our documentation.