Tabs

Tabs organize content into multiple sections, allowing users to switch between views within the same context.

UsageCodeAccessibility
Personal informationEducationProjects

Personal information

Education history of Tim Jenssen

2020 - 2023 Da Vinci International School
List of projects

Photo by Xia Yang

<sl-tab-group style="background: var(--sl-color-tab-default-background); inline-size: 500px">
  <sl-tab selected>Personal information</sl-tab>
  <sl-tab>Education</sl-tab>
  <sl-tab disabled>Projects</sl-tab>
  <sl-tab-panel>
    Personal information...
  </sl-tab-panel>
  <sl-tab-panel>
    Education history of...
  </sl-tab-panel>
  <sl-tab-panel>
    ...
  </sl-tab-panel>
</sl-tab-group>

When to use

Tabs are suitable for organizing content into distinct categories or sections within a single view.

Segmenting Content

Tabs are ideal for clustering content when they can be split into separate sections or categories. By grouping related information into different tabs, it reduces overload, and users can navigate through content more efficiently, thus helping to decrease cognitive load.

Enhanced Workflow

Tabs facilitate seamless user task completion by organizing content like forms, settings, and dashboards within the same interface, eliminating the need for users to navigate away from their workflow.

When not to use

While tabs can be a valuable clustering tool, they might not always be the best choice. Here are some scenarios where you need to find different alternatives.

Simultaneously Content

Avoid using tabs if users need to compare information in two groups, as constant switching between tabs increases cognitive load and interaction cost. Don't use it when users don't need to view content from multiple tabs simultaneously.

Hiding Information

Be cautious when hiding critical information behind tabs, leading users to overlook important details and ensuring that essential information is readily accessible without excessive tab navigation, enhancing user experience and usability. Additionally, nesting tabs within tabs can create usability issues and confuse users. Instead, consider alternative components like accordions.

Anatomy

Tabs are a combination of a tab list and a tab panel. The tab list contains the navigation tabs. When there is overflow, it shows the "more button" to open the tabs popover. The tab panel presents content for selected tabs.

ItemNameDescriptionOptional
1IconThe icon improves the visibility.Yes
2TitleThe tab's label needs to be clear and direct to make it easier for the user to scan through the content.Yes
3SubtitleA description text clarifies the content the user will find in the tab panel.Yes
4BadgeGive the user some quotes about whether there is new content or the need to review the panel content.Yes
5IndicatorVisual distinction of the tab to make it easy to see between an active and inactive tab.no
6TabInteractive button to display the tab panel related to the tab.no
7More ButtonButton to show the tabs menu when there is a hidden tab.no

Tabs Popover

When overflow occurs, we provide a "more button" to display the hidden tabs. We are using the popover; you can check more details here.

States and Status

Tabs come with multiple states, each suited for different interactions, and two status. The states provided are default, hover, active, disabled and focus, but we need to differentiate between those two alternative status:

  • Unselected: This tab appearance is the inactive version and provides a visually clear design. Making it easy for the user to scan the content and make a quick choice.

  • Selected: This tab appearance is the inactive version and provides a visually clear distinction to make it easier for the user to see where they are in the interface.

Orientation

The orientation of tabs plays a significant role in determining the layout and functionality of the user.

  • Horizontal: In this orientation, tabs are arranged side by side, at the top of the content area. It provides much more space optimization. They offer easy access to the content and are commonly used in desktop applications or website interfaces.

  • Vertical: This version displays the tabs in a column stack, usually along the left or right side of the panel. Vertical tabs are beneficial when the content height exceeds its width, providing efficient navigation for lengthy lists or categories.

Figma Options

With these options, you can tweak the appearance of the tabs in Figma. They are available in the Design Panel so you can compose the tabs to exactly fit the user experience need for the use case you are working on.

Tab List

The tab list provides the options to set up the version of the component that you need.

ItemOptionsDescription
SubtitlesbooleanToggle to display the subtitle in the tabs.
Alignementleft filledDefine the behaviour of the tab related to the tab list.
More ButtonbooleanToggle to display the overflow button in the tabs list.

Tabs

This are the tab buttons to switch between content.

ItemOptionsDescription
Statedefault hover active aisabledDefine the behaviour of the tab related to the tab list.
BadgebooleanToggle to display the badge in the tabs.
IconbooleanToggle to display the icon in the tabs.
Icon OnlybooleanToggle to switch only icon tabs.
TitlevalueText input to insert the title.
SubtitlevalueText input to insert the subtitle.

Behavior

Understanding the behavior of tabs is crucial for creating intuitive and user-friendly content access. Tabs exhibit various characteristics and functionalities that impact how users interact with them.

No Label Wrap

When the labels may exceed the available space, especially in lengthy titles. We don't wrap the labels, preventing truncation to ensure users can still identify and access tabs without sacrificing usability. To solve the hide tabs, we provide an overflow tabs button.

Focusable Area

Tabs should provide a focusable area to accommodate keyboard navigation. The focusable area allows users to navigate between tabs, enhancing usability and accessibility for all users.

Overflow Tabs

In cases where the number of tabs exceeds the available space, overflow buttons offer a solution for managing tab visibility. The overflow tabs menu provides a solution for accessing hidden tabs. The tabs list is also scrollable, allowing users to move horizontally to view additional tabs.

Tab 1Tab 2Tab 3Tab 4Tab 5Panel 1Panel 2Panel 3Panel 4Panel 5
<sl-tab-group style="background: var(--sl-color-tab-default-background);">
  <sl-tab >Tab 1</sl-tab>
  <sl-tab selected>Tab 2</sl-tab>
  <sl-tab disabled>Tab 3</sl-tab>
  <sl-tab>Tab 4</sl-tab>
  <sl-tab>Tab 5</sl-tab>
  <sl-tab-panel>Panel 1</sl-tab-panel>
  <sl-tab-panel>Panel 2</sl-tab-panel>
  <sl-tab-panel>Panel 3</sl-tab-panel>
  <sl-tab-panel>Panel 4</sl-tab-panel>
  <sl-tab-panel>Panel 5</sl-tab-panel>
</sl-tab-group>

Tab group API

Component has a range of properties to define the experience in different use cases.

Properties

NameAttributeTypeDefaultDescription
alignTabsalign-tabs'start' | 'center' | 'end' | 'stretch' | undefinedThe alignment of tabs within the wrapper.
menuItems-Array<{ tab: Tab; disabled?: boolean; title: string; subtitle?: string }> | undefinedThe menu items to render when the tabs are overflowing.
selectedTab-Tab | undefinedThe currently selected tab.
showMenu-booleanfalseWhether the menu button needs to be shown.
tabPanels-TabPanel[] | undefinedThe slotted tabs.
tabs-Tab[] | undefinedThe slotted tabs.
verticalverticalboolean | undefinedRenders the tabs vertically instead of the default horizontal

Events

NameEvent typeDescription
sl-tab-changeSlTabChangeEventEmits when the tab has been selected/changed.

Slots

NameDescription
defaultTab panels or other tab content here.
tabsThe tabs to display.

CSS Properties

NameDescription
--sl-tab-group-menu-min-inline-sizeThe minimum inline size of the menu.
--sl-tab-group-menu-max-inline-sizeThe maximum inline size of the menu.

Tab panel API

Component has a range of properties to define the experience in different use cases.

Slots

NameDescription
defaultA place for the tab panel content.

Tab API

Component has a range of properties to define the experience in different use cases.

Properties

NameAttributeTypeDefaultDescription
disableddisabledboolean | undefinedWhether the tab item is disabled.
hrefhrefstring | undefinedWhen set, it will render the tab contents in a link tag. Use this when you want to render the tab contents using a router and to make the tab navigatable by URL.
selectedselectedboolean | undefinedWhether the tab item is selected.

Slots

NameDescription
defaultA place for the tab group content.
iconIcon shown on the left side of the component.
badgeA place for badge component.
subtitleSubtitle of the tab, containing additional information.

Content

Creating an inclusive application requires more than just writing great code. It also involves writing clear and concise copy. Keep the users while writing the tab's titles and subtitles.

Short Tab Labels

Use plain language and keep labels short, usually 1-2 words. Longer labels may indicate that choices are too complex for a tab control. Simplify options to make them user-friendly.

No All Uppercase

Avoid using all caps for tab labels. It's harder to read. Use consistent capitalization style, either sentence-case or title-style.

Keyboard interactions

Keyboard interactions within a tabs group allow users to navigate options using arrow keys or the Tab key, facilitating efficient selection and ensuring accessibility for those who rely on keyboard navigation. Typically, users can navigate to the tabs using the "Tab" key, once they're in the first tab they can focus the different options with Arrow keys. Then they can select a new tab with the "Spacebar" or "Enter" key. Keyboard interaction ensures that individuals who rely on keyboard navigation or assistive technologies can easily control tabs within a user interface.

KeyDescription
TabShifts focus to the first tab control in a tab list. Or when a tabs is focuse the focus will go the the active tab in the page when the tab key is pressed
Space/EnterActivates the currently focused tab or open the overflow menu
Arrow KeysOnce you are "in" a tabs list you can navigate to the next tab by using the right or down arrow key. You can navigate back to the previous tab with left or up. The focus indicator loops, so when you are at the last tab and press "down" it will focus the first tab.

WAI-ARIA

WAI-ARIA Roles, States, and Properties for tabs provide essential information to assistive technologies and screen readers. They convey the tabs's role, state (checked, unchecked, valid and invalid), and additional properties to ensure accessibility and a better user experience for individuals using assistive technology.

Specifies whether the attribute is always set in the component (no) or it needs to be provided by the developer (yes)

Tab Group

AttributeValueDescriptionUser supplied
role'tablist'Makes it clear that element is a container for a set of tabs.no
aria-labelledbystringThe purpose of tabs - can be set to the id of labelling element.yes

Tab

AttributeValueDescriptionUser supplied
role'tab'Declare element as a tab control.no
aria-selectedstringIndicates the tab control is activated or not and its associated panel is displayed or not as well. Set to true when a user activates a tab.no
aria-controlsstringIt contains id of the tab panel element associated with the tab.no

Tab panel

AttributeValueDescriptionUser supplied
role'tabpanel'Declare the element as a container for tab panel content.no
aria-labelledbystringUsed to connect tab control with tab panel. Refers to the tab element that controls the panel; contains id of the tab control.no
Interactive example