Tabs

Description

Tabs are a set of buttons which allow navigation between content that is related and on the same level of hierarchy.

Demos

Tabs where content is provided from outside

As this may be a more common use case, we still have to ensure our tabs content is linked together with the tabs – because of accessibility.

You have to provide an id to both of the components.

NB: You don't need to use a function inside Tabs.Content – it can contain what ever you need to, as long as it is a React Node.

one

Tabs using 'data' property and content object

First

Tabs using 'data' property only

First

Tabs using React Components only

Also, this is an example of how to define a different content background color, by providing content_style.

First

Right aligned tabs

Active: second

Tabs optimized for mobile

Fourth

Notes about mobile view: The Tabs component does automatically calculate the remaining spacing once the screen gets under 40em in width. But depending on your setup, you may have to align your Tabs all the way to the edge of the browser window. E.g. with a negative margin:

@media screen and (min-width: 40em) {
.dnb-tabs .dnb-tabs__tabs {
margin: 0 -2rem;
}
.dnb-tabs .dnb-tabs__tabs__tablist {
padding: 0 2rem;
}
}

Router navigation with Reach Router

This demo uses @reach/router. More examples on CodeSandbox.

Router navigation with react-router-dom

This demo uses react-router-dom. More examples on CodeSandbox.

Example Content

const exampleContent = {
first: () => <H2>First</H2>,
second: () => <Input label="Label:">Focus me with next Tab key</Input>,
third: () => (
<>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</>
),
fourth: 'Fourth as a string only',
}