ns-tabs

Introduction#

Tabs provide organisation of content separated within the same context.

Related content can be separated into clearly labelled sections.

Content guidance#

Tabs

KeyField typeGuidelines
AIconThis is the icon inside the tab. This should relate to the label text. The specification table has a list of options.
BHeadingUse 1 or 2 words to inform the user of information found within each panel below.
CSelected TabThis is the visual state of a selected tab. Used to show the user which content is visible below.
DPanelThis is the area in which the content for each ns-tab will be displayed.

Best practice#

๐Ÿ’š Do's๐Ÿ’” Don'ts
Always add heading textAdd an icon to one tab and not to the other tabs
Add more than 2 words to the heading
Add different types of icons (solid, outline, functional)
Use at least two tabsUse an excessive amount of tabs
Be mindful of the extra page weightUse more than two words for your tab label

Considerations of best practice#

  • It is advisable to use tabs alongside other components to avoid building a page that consists only of tabs.
  • If you see that the tabs are bleeding over the edge of the page in Polo or Rugby, and you have followed the guidance on not using more than two words on the tab label, then you probably have too many tabs.
  • Consider breaking out some of your content and make sure the content is all relevant to that page.
  • Related tab and panel slots should be put together in order when adding the content.

Usage#

View example on Storybook

Component placement#

A close relationship exists between ns-tab and ns-panel. Within ns-tabs a number of ns-tab and ns-panel pairs exist. Each of these pairs provide a tab to select and a panel to place a layout and related content.

Specification for Individual Tab#

AttributeTypeDefaultOptionsDescription
iconstringPlease see the documentation for ns-iconOptional icon to add to the tab.
selectedbooleanfalsetrue, falsePre-selected tab
EventDescription
tabselectedSends a event when tab is selected.
SlotsType
anonymoustextNode

Specification for Tabs#

AttributeTypeDefaultOptionsDescription
opennumber0Number relates to the order of the tabs
SlotsType
tabns-tab tag
panelns-panel tag
EventDescription
tabchangeFires an event when the tab has been changed.

Specification notes#

Tab#

  • Multiple tab slots should be added to add multiple tabs. There should be the same amount of tab slots as panel slots.

Panel#

  • Multiple panel slots should be added to add multiple panels. There should be the same amount of panel slots as tab slots.

Design Tokens

You can change the branded look and feel of the ns-tabs by modifying these options in the design tokens.

Read more about design tokens in our getting started guide.

{
  "typography": "action"
}

Feedback#

  • Do you have insights or concerns to share? You can raise an issue via Github bugs.
  • See all the issues already raised via Github issues.

๐Ÿ’ฉ ๐ŸŽ‰ ๐Ÿฆ„ You can also contact the team on Slack on the #product-nucleus channel!