Tab
CHANGELOG

Install the component dependency:

Include a React component in your project:

Tab.ListItem PropTypes

Name

Value

Description

Default

active

boolean

styled active (automatically set)

href

string

url of resource (renders as anchor)

id

Required

string|number

id tying list item to panel

onClick

Event => ()

callback when list item clicked

Tab.Panel PropTypes

labelledBy

Required

string|number

id tying panel to list item

In-app example

The Tab component provides the look and feel and accessibility standards for the UI. You control the hiding and showing of content or other interaction specific to your application.

Menu stuff 3

class InAppExample extends React.Component {
  constructor(props) {
    super(props)
    this.state = { activeIndex: 2 }
    this.menus = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13].map(i => ({
      id: 'example' + i,
      label: 'Menu ' + i,
      content: 'Menu stuff ' + i
    }))
    this.handleTabClick = this.handleTabClick.bind(this)
  }
  handleTabClick(i) {
    this.setState({ activeIndex: i })
  }
  render() {
    return (
      <div>
        <Tab.List>
          {this.menus.map((menu, i) => (
            <Tab.ListItem
              id={menu.id}
              key={menu.id}
              onClick={this.handleTabClick}
              {...(i === this.state.activeIndex ? { active: true } : null)}
            >
              {menu.label}
            </Tab.ListItem>
          ))}
        </Tab.List>
        {this.menus.map((menu, i) =>
          i === this.state.activeIndex ? (
            <Tab.Panel labelledBy={menu.id} key={menu.id}>
              <div className="content">{menu.content}</div>
            </Tab.Panel>
          ) : null
        )}
      </div>
    )
  }
}

Tab List

Tabs are a navigational element used to show and pivot between related subsections of an interface.

Tab Panel

Panels are wrappers that provide an accessibility link between the Tab.ListItem and your content. Ensure your ids match to make the link.