Tabs

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.

Simple Tabs

class SimpleTabs extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      value: 0,
    };
  }

  handleChange(event, value) {
    this.setState({ value });
  }

  render() {
    return (
      <>
        <Tabs value={this.state.value} onChange={this.handleChange}>
          <Tab label="Item One" />
          <Tab label="Item Two" />
          <Tab label="Item Three" />
        </Tabs>
        {this.state.value === 0 && (
          <Typography component="div" padding={3}>
            Item One
          </Typography>
        )}
        {this.state.value === 1 && (
          <Typography component="div" padding={3}>
            Item Two
          </Typography>
        )}
        {this.state.value === 2 && (
          <Typography component="div" padding={3}>
            Item Three
          </Typography>
        )}
      </>
    );
  }
}

class SimpleTabs extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      value: 0,
    };
  }

  handleChange(event, value) {
    this.setState({ value });
  }

  render() {
    return (
      <>
        <Tabs value={this.state.value} onChange={this.handleChange}>
          <Tab label="Item One" />
          <Tab label="Item Two" />
          <Tab label="Item Three" />
        </Tabs>
        {this.state.value === 0 && (
          <Typography component="div" padding={3}>
            Item One
          </Typography>
        )}
        {this.state.value === 1 && (
          <Typography component="div" padding={3}>
            Item Two
          </Typography>
        )}
        {this.state.value === 2 && (
          <Typography component="div" padding={3}>
            Item Three
          </Typography>
        )}
      </>
    );
  }
}

Wrapped Labels

Long labels will automatically wrap on tabs. If the label is too long for the tab, it will overflow and the text will not be visible.

class TabsWrappedLabel extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      value: 0,
    };
  }

  handleChange(event, value) {
    this.setState({ value });
  }

  render() {
    return (
      <>
        <Tabs value={this.state.value} onChange={this.handleChange}>
          <Tab label="A Fantastically Long Title For This Content" />
          <Tab label="Item Two" />
          <Tab label="Item Three" />
        </Tabs>
        {this.state.value === 0 && (
          <Typography component="div" padding={3}>
            Item One
          </Typography>
        )}
        {this.state.value === 1 && (
          <Typography component="div" padding={3}>
            Item Two
          </Typography>
        )}
        {this.state.value === 2 && (
          <Typography component="div" padding={3}>
            Item Three
          </Typography>
        )}
      </>
    );
  }
}

class TabsWrappedLabel extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      value: 0,
    };
  }

  handleChange(event, value) {
    this.setState({ value });
  }

  render() {
    return (
      <>
        <Tabs value={this.state.value} onChange={this.handleChange}>
          <Tab label="A Fantastically Long Title For This Content" />
          <Tab label="Item Two" />
          <Tab label="Item Three" />
        </Tabs>
        {this.state.value === 0 && (
          <Typography component="div" padding={3}>
            Item One
          </Typography>
        )}
        {this.state.value === 1 && (
          <Typography component="div" padding={3}>
            Item Two
          </Typography>
        )}
        {this.state.value === 2 && (
          <Typography component="div" padding={3}>
            Item Three
          </Typography>
        )}
      </>
    );
  }
}

Fixed Tabs

Fixed tabs should be used with a limited number of tabs and when consistent placement will aid muscle memory.

Full width

The variant="fullWidth" property should be used for smaller views.

class FullWidthTabs extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      value: 0,
    };
  }

  handleChange(event, value) {
    this.setState({ value });
  }

  render() {
    return (
      <>
        <Tabs value={this.state.value} onChange={this.handleChange} variant="fullWidth">
          <Tab label="Item One" />
          <Tab label="Item Two" />
          <Tab label="Item Three" />
        </Tabs>
        {this.state.value === 0 && (
          <Typography component="div" padding={3}>
            Item One
          </Typography>
        )}
        {this.state.value === 1 && (
          <Typography component="div" padding={3}>
            Item Two
          </Typography>
        )}
        {this.state.value === 2 && (
          <Typography component="div" padding={3}>
            Item Three
          </Typography>
        )}
      </>
    );
  }
}

class FullWidthTabs extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      value: 0,
    };
  }

  handleChange(event, value) {
    this.setState({ value });
  }

  render() {
    return (
      <>
        <Tabs value={this.state.value} onChange={this.handleChange} variant="fullWidth">
          <Tab label="Item One" />
          <Tab label="Item Two" />
          <Tab label="Item Three" />
        </Tabs>
        {this.state.value === 0 && (
          <Typography component="div" padding={3}>
            Item One
          </Typography>
        )}
        {this.state.value === 1 && (
          <Typography component="div" padding={3}>
            Item Two
          </Typography>
        )}
        {this.state.value === 2 && (
          <Typography component="div" padding={3}>
            Item Three
          </Typography>
        )}
      </>
    );
  }
}

Centered

The centered property should be used for larger views.

class CenteredTabs extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      value: 0,
    };
  }

  handleChange(event, value) {
    this.setState({ value });
  }

  render() {
    return (
      <>
        <Tabs value={this.state.value} onChange={this.handleChange} centered>
          <Tab label="Item One" />
          <Tab label="Item Two" />
          <Tab label="Item Three" />
        </Tabs>
        {this.state.value === 0 && (
          <Typography component="div" padding={3}>
            Item One
          </Typography>
        )}
        {this.state.value === 1 && (
          <Typography component="div" padding={3}>
            Item Two
          </Typography>
        )}
        {this.state.value === 2 && (
          <Typography component="div" padding={3}>
            Item Three
          </Typography>
        )}
      </>
    );
  }
}

class CenteredTabs extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      value: 0,
    };
  }

  handleChange(event, value) {
    this.setState({ value });
  }

  render() {
    return (
      <>
        <Tabs value={this.state.value} onChange={this.handleChange} centered>
          <Tab label="Item One" />
          <Tab label="Item Two" />
          <Tab label="Item Three" />
        </Tabs>
        {this.state.value === 0 && (
          <Typography component="div" padding={3}>
            Item One
          </Typography>
        )}
        {this.state.value === 1 && (
          <Typography component="div" padding={3}>
            Item Two
          </Typography>
        )}
        {this.state.value === 2 && (
          <Typography component="div" padding={3}>
            Item Three
          </Typography>
        )}
      </>
    );
  }
}

Scrollable Tabs

These examples are contained within an AppBar. Tabs can be uncontained, or contained within an AppBar or other containers such as a humble div. As with any UI element, ensure that the background and text colors have appropriate contrast. You can check the accessibility of foreground and background colors with the WebAIM Color Contrast Checker tool.

Automatic Scroll Buttons

Left and right scroll buttons will automatically be presented on desktop and hidden on mobile (based on viewport width).

class ScrollableTabsButtonAuto extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      value: 0,
    };
  }

  handleChange(event, value) {
    this.setState({ value });
  }

  render() {
    return (
      <>
        <AppBar position="static" color="neutral">
          <Tabs
            value={this.state.value}
            onChange={this.handleChange}
            variant="scrollable"
            scrollButtons="auto"
          >
            <Tab label="Item One" />
            <Tab label="Item Two" />
            <Tab label="Item Three" />
            <Tab label="Item Four" />
            <Tab label="Item Five" />
            <Tab label="Item Six" />
            <Tab label="Item Seven" />
          </Tabs>
        </AppBar>
        {this.state.value === 0 && (
          <Typography component="div" padding={3}>
            Item One
          </Typography>
        )}
        {this.state.value === 1 && (
          <Typography component="div" padding={3}>
            Item Two
          </Typography>
        )}
        {this.state.value === 2 && (
          <Typography component="div" padding={3}>
            Item Three
          </Typography>
        )}
        {this.state.value === 3 && (
          <Typography component="div" padding={3}>
            Item Four
          </Typography>
        )}
        {this.state.value === 4 && (
          <Typography component="div" padding={3}>
            Item Five
          </Typography>
        )}
        {this.state.value === 5 && (
          <Typography component="div" padding={3}>
            Item Six
          </Typography>
        )}
        {this.state.value === 6 && (
          <Typography component="div" padding={3}>
            Item Seven
          </Typography>
        )}
      </>
    );
  }
}

class ScrollableTabsButtonAuto extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      value: 0,
    };
  }

  handleChange(event, value) {
    this.setState({ value });
  }

  render() {
    return (
      <>
        <AppBar position="static" color="neutral">
          <Tabs
            value={this.state.value}
            onChange={this.handleChange}
            variant="scrollable"
            scrollButtons="auto"
          >
            <Tab label="Item One" />
            <Tab label="Item Two" />
            <Tab label="Item Three" />
            <Tab label="Item Four" />
            <Tab label="Item Five" />
            <Tab label="Item Six" />
            <Tab label="Item Seven" />
          </Tabs>
        </AppBar>
        {this.state.value === 0 && (
          <Typography component="div" padding={3}>
            Item One
          </Typography>
        )}
        {this.state.value === 1 && (
          <Typography component="div" padding={3}>
            Item Two
          </Typography>
        )}
        {this.state.value === 2 && (
          <Typography component="div" padding={3}>
            Item Three
          </Typography>
        )}
        {this.state.value === 3 && (
          <Typography component="div" padding={3}>
            Item Four
          </Typography>
        )}
        {this.state.value === 4 && (
          <Typography component="div" padding={3}>
            Item Five
          </Typography>
        )}
        {this.state.value === 5 && (
          <Typography component="div" padding={3}>
            Item Six
          </Typography>
        )}
        {this.state.value === 6 && (
          <Typography component="div" padding={3}>
            Item Seven
          </Typography>
        )}
      </>
    );
  }
}

Forced Scroll Buttons

Left and right scroll buttons will be presented regardless of the viewport width.

class ScrollableTabsButtonOn extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      value: 0,
    };
  }

  handleChange(event, value) {
    this.setState({ value });
  }

  render() {
    return (
      <>
        <AppBar position="static" color="neutral">
          <Tabs
            value={this.state.value}
            onChange={this.handleChange}
            variant="scrollable"
            scrollButtons="on"
          >
            <Tab label="Item One" />
            <Tab label="Item Two" />
            <Tab label="Item Three" />
            <Tab label="Item Four" />
            <Tab label="Item Five" />
            <Tab label="Item Six" />
            <Tab label="Item Seven" />
          </Tabs>
        </AppBar>
        {this.state.value === 0 && (
          <Typography component="div" padding={3}>
            Item One
          </Typography>
        )}
        {this.state.value === 1 && (
          <Typography component="div" padding={3}>
            Item Two
          </Typography>
        )}
        {this.state.value === 2 && (
          <Typography component="div" padding={3}>
            Item Three
          </Typography>
        )}
        {this.state.value === 3 && (
          <Typography component="div" padding={3}>
            Item Four
          </Typography>
        )}
        {this.state.value === 4 && (
          <Typography component="div" padding={3}>
            Item Five
          </Typography>
        )}
        {this.state.value === 5 && (
          <Typography component="div" padding={3}>
            Item Six
          </Typography>
        )}
        {this.state.value === 6 && (
          <Typography component="div" padding={3}>
            Item Seven
          </Typography>
        )}
      </>
    );
  }
}

class ScrollableTabsButtonOn extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      value: 0,
    };
  }

  handleChange(event, value) {
    this.setState({ value });
  }

  render() {
    return (
      <>
        <AppBar position="static" color="neutral">
          <Tabs
            value={this.state.value}
            onChange={this.handleChange}
            variant="scrollable"
            scrollButtons="on"
          >
            <Tab label="Item One" />
            <Tab label="Item Two" />
            <Tab label="Item Three" />
            <Tab label="Item Four" />
            <Tab label="Item Five" />
            <Tab label="Item Six" />
            <Tab label="Item Seven" />
          </Tabs>
        </AppBar>
        {this.state.value === 0 && (
          <Typography component="div" padding={3}>
            Item One
          </Typography>
        )}
        {this.state.value === 1 && (
          <Typography component="div" padding={3}>
            Item Two
          </Typography>
        )}
        {this.state.value === 2 && (
          <Typography component="div" padding={3}>
            Item Three
          </Typography>
        )}
        {this.state.value === 3 && (
          <Typography component="div" padding={3}>
            Item Four
          </Typography>
        )}
        {this.state.value === 4 && (
          <Typography component="div" padding={3}>
            Item Five
          </Typography>
        )}
        {this.state.value === 5 && (
          <Typography component="div" padding={3}>
            Item Six
          </Typography>
        )}
        {this.state.value === 6 && (
          <Typography component="div" padding={3}>
            Item Seven
          </Typography>
        )}
      </>
    );
  }
}

Prevent Scroll Buttons

Left and right scroll buttons will never be presented. All scrolling must be initiated through user agent scrolling mechanisms (e.g. left/right swipe, shift-mousewheel, etc.).

class ScrollableTabsButtonPrevent extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      value: 0,
    };
  }

  handleChange(event, value) {
    this.setState({ value });
  }

  render() {
    return (
      <>
        <AppBar position="static" color="neutral">
          <Tabs
            value={this.state.value}
            onChange={this.handleChange}
            variant="scrollable"
            scrollButtons="off"
          >
            <Tab label="Item One" />
            <Tab label="Item Two" />
            <Tab label="Item Three" />
            <Tab label="Item Four" />
            <Tab label="Item Five" />
            <Tab label="Item Six" />
            <Tab label="Item Seven" />
          </Tabs>
        </AppBar>
        {this.state.value === 0 && (
          <Typography component="div" padding={3}>
            Item One
          </Typography>
        )}
        {this.state.value === 1 && (
          <Typography component="div" padding={3}>
            Item Two
          </Typography>
        )}
        {this.state.value === 2 && (
          <Typography component="div" padding={3}>
            Item Three
          </Typography>
        )}
        {this.state.value === 3 && (
          <Typography component="div" padding={3}>
            Item Four
          </Typography>
        )}
        {this.state.value === 4 && (
          <Typography component="div" padding={3}>
            Item Five
          </Typography>
        )}
        {this.state.value === 5 && (
          <Typography component="div" padding={3}>
            Item Six
          </Typography>
        )}
        {this.state.value === 6 && (
          <Typography component="div" padding={3}>
            Item Seven
          </Typography>
        )}
      </>
    );
  }
}

class ScrollableTabsButtonPrevent extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      value: 0,
    };
  }

  handleChange(event, value) {
    this.setState({ value });
  }

  render() {
    return (
      <>
        <AppBar position="static" color="neutral">
          <Tabs
            value={this.state.value}
            onChange={this.handleChange}
            variant="scrollable"
            scrollButtons="off"
          >
            <Tab label="Item One" />
            <Tab label="Item Two" />
            <Tab label="Item Three" />
            <Tab label="Item Four" />
            <Tab label="Item Five" />
            <Tab label="Item Six" />
            <Tab label="Item Seven" />
          </Tabs>
        </AppBar>
        {this.state.value === 0 && (
          <Typography component="div" padding={3}>
            Item One
          </Typography>
        )}
        {this.state.value === 1 && (
          <Typography component="div" padding={3}>
            Item Two
          </Typography>
        )}
        {this.state.value === 2 && (
          <Typography component="div" padding={3}>
            Item Three
          </Typography>
        )}
        {this.state.value === 3 && (
          <Typography component="div" padding={3}>
            Item Four
          </Typography>
        )}
        {this.state.value === 4 && (
          <Typography component="div" padding={3}>
            Item Five
          </Typography>
        )}
        {this.state.value === 5 && (
          <Typography component="div" padding={3}>
            Item Six
          </Typography>
        )}
        {this.state.value === 6 && (
          <Typography component="div" padding={3}>
            Item Seven
          </Typography>
        )}
      </>
    );
  }
}