Tabs consist of two or more tab items created for navigating between different sections of content.
Each tab will display different sections within the same context. For example, tabs can display different sections of an article, different topics or different edit views.
The Tabs component always contains two or more Tab items.
Tabs include the following elements:
- Selected tab
Within the tabs component, only one tab item can be selected at a time.
- Unselected tabs
The remaining tab items will remain unselected. Users can choose these tabs by clicking on them or navigating to them via the keyboard’s arrow keys.
- Arrow button
When tabs become scrollable, one or two icon-only buttons will appear. The number of buttons to scroll tabs will vary based on the tabs' scroll position. Users can utilize these buttons to navigate through the scrollable tabs.
When there is not enough space to display all tabs, scrolling will be activated. When the scroll is enabled, the positions of the tabs will be indicated by arrow buttons:
- Initial position: Due to the tabs being in the first position, only the end arrow button will be visible at the end to scroll the tabs.
- Middle position: Both the start and end arrow buttons will be visible.
- End position: As scrolling reaches the end, only the start arrow will be visible in order to scroll the tabs from the end to the beginning.
Depending on the tabs' style and where they are employed, there are two types of tabs:
These tabs feature a transparent background with a Gray400 underline to delineate the tabs base. The selected tab is highlighted in blue with a blue line underneath. These tabs are intended for use on open white backgrounds, and it is not recommended to use them within boxes or modules.
These tabs have a Gray200 background, with the selected tab appearing in white. They are designed to be used within boxes or modules, where the gray background serves as a head for the box. It is not recommended to use framed tabs outside of a box context; in such cases, use the quiet tabs instead.
The Tabs component itself does not have distinct states. Instead, individual states will be attributed to each Tab item.
Two stylistic variants are available, quiet (the default) and framed.
Header row scroll
When the width of the header row exceeds the width of its container, arrow buttons will appear to enable scrolling through tab names.
Content for tab1
This is the content for the First Tab
Dynamic replacement of slot content
The Tabs component will re-render if the provided slot content changes. Clicking the button below will replace the initial tabs with a new set; the header row will update to match.
Content for tab1
This is the content for the First Tab
One or more Tab components must be provided in the default slot of the Tabs component. Each child Tab component must have a
name property. The Tabs component must have an
active prop that matches the name of one of the child Tab components in the slot.
In order for the active tabs to change, the
name of the active tab must be bound in the parent somehow, either using
v-model:active or by manually binding the
active prop and listening for
|Whether or not the component should be displayed in a framed visual style.|
|Programmatically select a tab based on its "name" prop||Params: |
|Set the next tab to active, if one exists||Params: |
|Set the previous tab to active, if one exists||Params: |
|active ||Emitted whenever the active tab changes|
|default||One or more Tab components must be provided here|
The non-JS version of the Tabs component should be seen as a navigational tool. It relies on HTML form submission to trigger a change in the current active tab. When the user clicks on a tab button (or hits "Enter" while focused over one), the browser will load a new page.
- The outermost element should be a
<div>element with the class
cdx-tabs__headerelement should be a
<form>with the following attributes:
method="get": we will send the form with a GET request
action="myURL": The value of
actionshould be whatever URL the form data will be sent to; in this example it's simply the same URL as the page, but appended with a different URL query parameter based on the user's tab selection. In a real-world use-case, this might be a URL that can accept query parameters (say for performing a different kind of search based on which tab the user selects).
- Within the
tablistelement, every tab label is represented by a
<button>element (this is the same as in the Vue version). However, since we are submitting the data as a form, each tab button must contain a
valueattribute. In a real application, this might correspond to key-value pairs used for a given query parameter.
- The tab corresponding to the current view should contain the
aria-selected="true"attribute. All other tabs should have
aria-selected="false". If you are using a server-side templating language like Mustache, this should be set there.
- Each tab should also have an
aria-controlsattribute with a value of the ID of the corresponding
- Don't mess with
tabindex– since the CSS-only version of this component has no way to bind left and right arrow keys to handler methods, the user is going to need to rely on the mouse or the tab key to navigate between tabs.
- To disable a tab, simply add a
disabledattribute to that tab's
<button>in the tablist.
The tabs below have long labels, making the tab list too long for its container. When this happens, you can horizontally scroll to reach the rest of the tabs list.
Keyboard navigation between tabs can only be done via the Tab key. Arrow keys will not work here.