Skip to content

Tabs

Description

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

Demos

Left aligned tabs, using both 'data' property and content object

First

Left aligned tabs, using 'data' property only

First

Left aligned tabs, using React Components only

First

Right aligned tabs

Active: second

Example Content

const exampleContent = {
first: () => <h2 className="dnb-h--large">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'
}