The tabs component lets users navigate between related sections of content, displaying one section at a time.
{{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "default", id: "65a9300639efd" }) }}Tabs can be a helpful way of letting users quickly switch between related information if:
The tabs component consists of tabs and panels. Tabs can either be links or buttons, and panels are sections of the page which can be hidden/revealed. By default all panel sections are shown and the tab links allow visitors to jump to those sections.
The tabs component uses JavaScript. When JavaScript is not available, users will see the tabbed content on a single page, in order from first to last, with a of jump links that navigate to each of the sections. This is also how the component currently behaves on small screens.
By default the first panel section is shown, unless the visitor opens the page with a hash within the url that matches one of the panel ids. The selected tab will match the panel showing and url.
To interact with the tabs, the visitor can either click on the tab or they can tab into the tabs list using the “tab” key. The “home”, “left”, “right” and “end” keys can be used to select a tab. Using either the “enter” or “space” keys will open the corresponding panel.
When moving between tabs, the URL gets updated with a fragment (#id-of-the-tab) corresponding to the current tab’s id attribute’s value.
If the tab’s name is “Details” then the fragment could be #tab_details.
Because of this feature, pressing the browser’s ‘back’ button should navigate back to the previous tab.
Aria labelling is added and is responsive to the visitors’ interactions.
An optional heading can be added with corresponding aria-labelledby attribute for the list element.
The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.