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

First

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

Active: second

Right aligned tabs

Example Content

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