---
name: Tabs
route: /components/common/tabs/tabs
edit: false
---

import { Playground, Props } from 'docz'
import Tabs from './tabs'
import Tab from './tab'
import TabList from './tab-list'
import TabItem from './tab-item'

# Tabs
**SUBCATEGORY:** Navigation

<hr />

## Tabs
### Description
For navigating between related sections of content within a single context.

<Playground>
  <Tabs>
    <Tab id='tab1' title='Tab item 1'>
      <p style={{margin: '1rem 0'}}>Tab 1 content</p>
    </Tab>
    <Tab id='tab2' title='Tab item 2' defaultSelected>
      <div style={{margin: '1rem 0'}}>Tab 2 content</div>
    </Tab>
    <Tab id='tab3' title='Tab item 3'>
      <div style={{margin: '1rem 0'}}>Tab 3 content</div>
    </Tab>
  </Tabs>
</Playground>


<hr />

## Tabs (minor)
### Description
For navigating between related sections of content within a single context.

<Playground>
  <Tabs minor>
    <Tab id='taba' title='Tab item A'>
      <p style={{margin: '1rem 0'}}>Tab A content</p>
    </Tab>
    <Tab id='tabb' title='Tab item B'>
      <p style={{margin: '1rem 0'}}>Tab B content</p>
    </Tab>
    <Tab id='tabc' title='Tab item C'>
      <p style={{margin: '1rem 0'}}>Tab C content</p>
    </Tab>
    <Tab id='tabd' title='Tab item D'>
      <p style={{margin: '1rem 0'}}>Tab D content</p>
    </Tab>
  </Tabs>
</Playground>

<hr />

## Tabs (adjacent)
### Description
For navigating between related sections of content within a single context.

**The adjacent prop sets the layout on small screens to stack items vertically instead of horizonatally.**

<Playground>
  <Tabs adjacent>
    <Tab id='tab1' title='Tab item 1'>
      <div style={{margin: '1rem 0'}}>Tab 1 content</div>
    </Tab>
    <Tab id='tab2' title='Tab item 2'>
      <div style={{margin: '1rem 0'}}>Tab 2 content</div>
    </Tab>
  </Tabs>
</Playground>

<hr />

## Tabs (minor, adjacent)
### Description
For navigating between related sections of content within a single context.

**The adjacent prop sets the layout on small screens to stack items vertically instead of horizonatally.**

<Playground>
  <Tabs minor adjacent>
    <Tab id='tab1' title='Tab item 1'>
      <div style={{margin: '1rem 0'}}>Tab 1 content</div>
    </Tab>
    <Tab id='tab2' title='Tab item 2'>
      <div style={{margin: '1rem 0'}}>Tab 2 content</div>
    </Tab>
  </Tabs>
</Playground>

<hr />

## TabsList and TabItem
### Description
Without `Tab` content; for navigating between different links, pages or sections.

**When a series of links is needed for custom navigation or without the need to hide/show content.`TabItem` selection is controlled manually.**

<Playground>
  <TabList>
    <TabItem href="#test1" title='Tab item 1' />
    <TabItem href="#test2" title='Tab item 2' selected />
    <TabItem href="#test3" title='Tab item 3' />
  </TabList>
</Playground>

<hr />

## TabsList and TabItem (adjacent, minor)
### Description
Without `Tab` content; for navigating between different links, pages or sections.

**When a series of links is needed for custom navigation or without the need to hide/show content.`TabItem` selection is controlled manually.**

<Playground>
  <TabList adjacent>
    <TabItem minor href="#test1" title='Tab item 1' />
    <TabItem minor href="#test2" title='Tab item 2' selected />
    <TabItem minor href="#test3" title='Tab item 3' />
  </TabList>
</Playground>

<hr />

## Properties
<Props of={Tabs} />