Tabs

Master-detail pattern for navigating content

Demo

API

Tags

Name Type Content
m-tabs Custom tag button or a children

Attributes

Name Value Description

For m-tabs only:

scrollable Boolean attribute Makes the tab list horizontally scrollable. In some cases, like flex grow, overflow doesn't happen and so the parent element will need an explicit width (try the width-full utility class).

For tab only:

aria-selected true or false Set the selected tab to true. See Selecting tabs for examples.
disabled Boolean attribute Disables the tab.

Guidelines

Selecting tabs

Selecting the tab

Setting the selected tab is handled by your app. To select a tab, set aria-selected="true". There are a several approaches you could take to manage this, but event delegation comparing tabs to the clicked tab is probably the simplest without a framework:

That will only select the tab. Selecting the corresponding tab panel is explained next.

Showing a tab panel

Mdash assumes nothing about what happens when a tab is selected, which allows for multiple solutions like toggling the hidden attribute, directly changing the DOM, rendering different components, navigating to a new page, or something else. Here's an example of the typical use case of selecting a tab and showing its panel:

Here's the same thing with a more declarative approach using Riot.js, for example:

Accessibility

All of the necessary ARIA attributes are here in the example below: