Design System

Visual Style

Components

Patterns

Guides

Resources

Tabs

For navigating between sections of related content.

import { Tab, Tabs } from "@nulogy/components";

<Tabs>
  <Tab label="Tab 1">Tab 1 Content</Tab>
  <Tab label="Tab 2">Tab 2 Content</Tab>
  <Tab label="Tab 3">Tab 3 Content</Tab>
  <Tab label="Tab 4">Tab 4 Content</Tab>
</Tabs>

Variations

Fitted

import { Tab, Tabs } from "@nulogy/components";

<Tabs fitted>
  <Tab label="Tab 1">Tab 1 Content</Tab>
  <Tab label="Tab 2">Tab 2 Content</Tab>
  <Tab label="Tab 3">Tab 3 Content</Tab>
  <Tab label="Tab 4">Tab 4 Content</Tab>
</Tabs>

As a controlled component

If custom behaviour is needed for the Tabs component, using the onTabClick and selectedIndex props allows for a controlled use of Tabs. onTabClick will be passed into all provided Tab components, and runs with arguments onClick(event, index). onClick can still be individually applied to each Tab component optionally as well.

import { Tab, Tabs } from "@nulogy/components";

class ControlledTabs extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedIndex: null
    };

    this.setSelectedTab = this.setSelectedTab.bind(this);
  }

  setSelectedTab(e, index) {
    this.setState({ selectedIndex: index });
  }

  render() {
    const { selectedIndex } = this.state;
    return (
      <>
        <Tabs onTabClick={this.setSelectedTab} selectedIndex={selectedIndex}>
          <Tab label="Tab 1">Uncontrolled Content: Tab 1</Tab>
          <Tab label="Tab 2">Uncontrolled Content: Tab 2</Tab>
          <Tab label="Tab 3">Uncontrolled Content: Tab 3</Tab>
          <Tab label="Tab 4">Uncontrolled Content: Tab 4</Tab>
        </Tabs>
        {selectedIndex !== null && <div>Controlled Content: Tab {selectedIndex + 1}</div>}
      </>
    );
  }
}

Responsive information

When the width of the individual Tab components exceed the total width of the Tabs component, scrolling becomes enabled and buttons are placed on the edges to make it easier to scroll to off-screen Tabs on mobile devices.

Props

NameTypeDefaultDescription

defaultSelectedIndex

Number

null

Index of the tab that is selected when rendered.

fitted

Boolean

false

Sets the tab components to equally take up the width of the tabs container.

renderTabContentOnlyWhenSelected

Boolean

false

Causes hidden tab content to only be rendered when the tab is selected.

selectedIndex

Number

undefined

Index of selected tab if controlling the tabs component.

onTabClick

Function

undefined

On click function passed to each tab component used when controlling the tabs component. Runs with arguments onClick(event, index).

className

String

null

className passed to the Tabs component

tabContentClassName

string

null

className passed to the tab content container

tabContentClassName

string

null

className passed to the tab content container

ariaLabelLeft

string

null

aria label on the left arrow button when tabs are scrollable

ariaLabelRight

string

null

aria label on the right arrow button when tabs are scrollable

Content guidelines

  • Only group together content that is related under a set of tabs
  • Keep tab labels short, general context for the group of tabs should be given already on the page
  • Do not use tabs as primary navigation
  • Do not require users to jump between tabs rapidly to complete a task.

Resources