Tabs

Master-detail pattern for navigating content

Demo

API

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:

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