Tabs provide organisation of content separated within the same context.
Related content can be separated into clearly labelled sections.
This is the icon inside the tab. This should relate to the label text. The specification table has a list of options.
Use 1 or 2 words to inform the user of information found within each panel below.
This is the visual state of a selected tab. Used to show the user which content is visible below.
This is the area in which the content for each
Always add heading text
Add 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 tabs
Use an excessive amount of tabs
Be mindful of the extra page weight
Use more than two words for your tab label
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.
To see examples visit Storybook.
<ns-tabs><ns-tab slot="tab">Electricity</ns-tab><ns-panel slot="panel">...</ns-panel><ns-tab slot="tab">Home Services</ns-tab><ns-panel slot="panel">...</ns-panel>...</ns-tabs>
Does it live in a panel?
Does it live inside other components?
What layout classes can be used?
A close relationship exists between
ns-tabs a number of
ns-panel pairs exist. Each of these pairs provide a tab to select and a panel to place a layout and related content.
Please see the documentation for ns-icon
Optional icon to add to the tab.
Sends a event when tab is selected.
Number relates to the order of the tabs
Fires an event when the tab has been changed.
Multiple tab slots should be added to add multiple tabs. There should be the same amount of tab slots as panel slots.
Multiple panel slots should be added to add multiple panels. There should be the same amount of panel slots as tab slots.
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