Tabs

Description

Tabs are a set of buttons that 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 any element you need, as long as it is a React Node.

one

<Tabs
id="unique-linked-id"
data={[
{
title: 'One',
key: 'one'
},
{
title: 'Two',
key: 'two'
}
]}
/>
<Tabs.Content id="unique-linked-id">
{({ key }) => {
return <H2>{ key }</H2>
}}
</Tabs.Content>

Tabs using 'data' property and content object

First

const data = [
{ title: 'First', key: 'first' },
{ title: 'Second', key: 'second' },
{ title: 'Third', key: 'third', disabled: true },
{ title: 'Fourth', key: 'fourth' }
];
render(
<Tabs data={data}>
{ exampleContent /* See Example Content below */ }
</Tabs>
)

Tabs using 'data' property only

First

<Tabs
data={{
first: {
title: 'First',
// See Example Content below
content: exampleContent.first
},
second: {
title: 'Second',
// See Example Content below
content: exampleContent.second
}
}}
// Only use "on_click" if you really have to
on_click={({ selected_key }) => {
console.log('on_click', selected_key)
}}
// Preferred way to listen on changes
on_change={({ selected_key }) => {
console.log('on_change', selected_key)
}}
/>

Tabs using React Components only

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

First

<Tabs tabs_style="mint-green" content_style="black-3">
<Tabs.Content title="First">
<H2 top={0} bottom>First</H2>
</Tabs.Content>
<Tabs.Content title="Second">
<H2 top={0} bottom>Second</H2>
</Tabs.Content>
</Tabs>

Tabs without bottom border

First

<Tabs no_border={true}>
<Tabs.Content title="First">
<H2 top={0} bottom>First</H2>
</Tabs.Content>
<Tabs.Content title="Second">
<H2 top={0} bottom>Second</H2>
</Tabs.Content>
</Tabs>

Tabs optimized for narrow screens

Navigation buttons will be shown and the tabs-list will be scrollable.

Fourth
<Tabs data={manyTabs}>
{ manyTabsContent }
</Tabs>

Horizontal aligned tabs

const FlexWrapper = styled.div`
display: flex;
flex-direction: row;
`
const MaxWidthWrapper = styled.div`
max-width: 30rem;
background: var(--color-mint-green-12);
`
const LeftArea = styled.div`
/* Ensure no-wrap */
flex-shrink: 0;
`
const RightArea = styled.div`
/* Ensure the tabbar is hidden outside this area */
overflow: hidden;
/* Ensure the focus ring is visible! (because of overflow: hidden) */
margin: -2px;
padding: 2px;
`
function TabsHorizontalAligned() {
return (
<FlexWrapper>
<LeftArea>
<ToggleButton.Group value="first">
<ToggleButton text="first" value="first" />
<ToggleButton text="second" value="second" />
</ToggleButton.Group>
</LeftArea>
<RightArea>
<Tabs
left
no_border
selected_key="first"
id="unique-tabs-row"
data={manyTabs}
/>
</RightArea>
</FlexWrapper>
)
}
render(<TabsHorizontalAligned />)

max-width usage

const MaxWidthWrapper = styled.div`
max-width: 30rem;
background: var(--color-mint-green-12);
`
function TabsMaxWidth() {
return (
<MaxWidthWrapper>
<Tabs
top
no_border
selected_key="fifth"
id="unique-tabs-max-width"
data={manyTabs}
/>
</MaxWidthWrapper>
)
}
render(<TabsMaxWidth />)

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',
}