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.
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:

That will select the tab, but that is not typically everything you need to do. Showing the corresponding tab panel requires a bit more.

Showing a tab panel

This component assumes nothing about what happens when a tab is selected, which allows for multiple use cases like toggling between tab panels in the DOM or 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: