Tabs

This is a pass through component from React-Bootstrap.
See React-Bootstrap for documentation.

Uncontrolled usage

Show editable code example

Any Paragon component or export may be added to the code example.

<Tabs
  variant="tabs"
  defaultActiveKey="profile"
  id="uncontrolled-tab-example"
>
  <Tab eventKey="home" title="Home">
    Hello I am the first panel.
  </Tab>
  <Tab eventKey="profile" title="Profile">
    Hello I am the second panel.
  </Tab>
  <Tab eventKey="contact" title="Contact" disabled>
    Hello I am third first panel.
  </Tab>
</Tabs>

<Tabs
  variant="tabs"
  defaultActiveKey="profile"
  id="uncontrolled-tab-example"
>
  <Tab eventKey="home" title="Home">
    Hello I am the first panel.
  </Tab>
  <Tab eventKey="profile" title="Profile">
    Hello I am the second panel.
  </Tab>
  <Tab eventKey="contact" title="Contact" disabled>
    Hello I am third first panel.
  </Tab>
</Tabs>

Controlled usage

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  const [key, setKey] = useState('home');

  return (
    <Tabs
      id="controlled-tab-example"
      activeKey={key}
      onSelect={(k) => setKey(k)}
    >
      <Tab eventKey="home" title="Home">
        Hello I am the first panel.
      </Tab>
      <Tab eventKey="profile" title="Profile">
        Hello I am the second panel.
      </Tab>
      <Tab eventKey="contact" title="Contact" disabled>
        Hello I am third first panel.
      </Tab>
    </Tabs>
  );
}

() => {
  const [key, setKey] = useState('home');

  return (
    <Tabs
      id="controlled-tab-example"
      activeKey={key}
      onSelect={(k) => setKey(k)}
    >
      <Tab eventKey="home" title="Home">
        Hello I am the first panel.
      </Tab>
      <Tab eventKey="profile" title="Profile">
        Hello I am the second panel.
      </Tab>
      <Tab eventKey="contact" title="Contact" disabled>
        Hello I am third first panel.
      </Tab>
    </Tabs>
  );
}

Button group usage

Show editable code example

Any Paragon component or export may be added to the code example.

<Tabs
  defaultActiveKey="profile"
  id="uncontrolled-pills-tab-example"
  variant="button-group"
>
  <Tab eventKey="home" title="Home">
    Hello I am the first panel.
  </Tab>
  <Tab eventKey="profile" title="Profile">
    Hello I am the second panel.
  </Tab>
  <Tab eventKey="contact" title="Contact" disabled>
    Hello I am third first panel.
  </Tab>
</Tabs>

<Tabs
  defaultActiveKey="profile"
  id="uncontrolled-pills-tab-example"
  variant="button-group"
>
  <Tab eventKey="home" title="Home">
    Hello I am the first panel.
  </Tab>
  <Tab eventKey="profile" title="Profile">
    Hello I am the second panel.
  </Tab>
  <Tab eventKey="contact" title="Contact" disabled>
    Hello I am third first panel.
  </Tab>
</Tabs>

Pills usage

Show editable code example

Any Paragon component or export may be added to the code example.

<Tabs
  defaultActiveKey="profile"
  id="uncontrolled-pills-tab-example"
  variant="pills"
>
  <Tab eventKey="home" title="Home">
    Hello I am the first panel.
  </Tab>
  <Tab eventKey="profile" title="Profile">
    Hello I am the second panel.
  </Tab>
  <Tab eventKey="contact" title="Contact" disabled>
    Hello I am third first panel.
  </Tab>
</Tabs>

<Tabs
  defaultActiveKey="profile"
  id="uncontrolled-pills-tab-example"
  variant="pills"
>
  <Tab eventKey="home" title="Home">
    Hello I am the first panel.
  </Tab>
  <Tab eventKey="profile" title="Profile">
    Hello I am the second panel.
  </Tab>
  <Tab eventKey="contact" title="Contact" disabled>
    Hello I am third first panel.
  </Tab>
</Tabs>

Inverse-Pills usage

Show editable code example

Any Paragon component or export may be added to the code example.

<Stack className="bg-dark-700 p-4">
  <Tabs
    variant="inverse-pills"
    defaultActiveKey="profile"
    id="uncontrolled-pills-tab-example"
  >
    <Tab eventKey="home" title="Home">
      Hello I am the first panel.
    </Tab>
    <Tab eventKey="profile" title="Profile">
      Hello I am the second panel.
    </Tab>
    <Tab eventKey="contact" title="Contact" disabled>
      Hello I am third first panel.
    </Tab>
  </Tabs>
</Stack>

<Stack className="bg-dark-700 p-4">
  <Tabs
    variant="inverse-pills"
    defaultActiveKey="profile"
    id="uncontrolled-pills-tab-example"
  >
    <Tab eventKey="home" title="Home">
      Hello I am the first panel.
    </Tab>
    <Tab eventKey="profile" title="Profile">
      Hello I am the second panel.
    </Tab>
    <Tab eventKey="contact" title="Contact" disabled>
      Hello I am third first panel.
    </Tab>
  </Tabs>
</Stack>

Inverse Tabs usage

Show editable code example

Any Paragon component or export may be added to the code example.

<Stack className="bg-dark-700 p-4">
  <Tabs
    variant="inverse-tabs"
    defaultActiveKey="profile"
    id="uncontrolled-pills-tab-example"
  >
    <Tab eventKey="home" title="Home">
      Hello I am the first panel.
    </Tab>
    <Tab eventKey="profile" title="Profile">
      Hello I am the second panel.
    </Tab>
    <Tab eventKey="contact" title="Contact" disabled>
      Hello I am third first panel.
    </Tab>
  </Tabs>
</Stack>

<Stack className="bg-dark-700 p-4">
  <Tabs
    variant="inverse-tabs"
    defaultActiveKey="profile"
    id="uncontrolled-pills-tab-example"
  >
    <Tab eventKey="home" title="Home">
      Hello I am the first panel.
    </Tab>
    <Tab eventKey="profile" title="Profile">
      Hello I am the second panel.
    </Tab>
    <Tab eventKey="contact" title="Contact" disabled>
      Hello I am third first panel.
    </Tab>
  </Tabs>
</Stack>

With notification

Show editable code example

Any Paragon component or export may be added to the code example.

<Tabs defaultActiveKey="profile" id="tab-example-with-notification">
  <Tab eventKey="home" title="Home">
    Hello I am the first panel.
  </Tab>
  <Tab eventKey="profile" title="Profile" notification={1}>
    Hello I am the second panel.
  </Tab>
</Tabs>

<Tabs defaultActiveKey="profile" id="tab-example-with-notification">
  <Tab eventKey="home" title="Home">
    Hello I am the first panel.
  </Tab>
  <Tab eventKey="profile" title="Profile" notification={1}>
    Hello I am the second panel.
  </Tab>
</Tabs>

Show editable code example

Any Paragon component or export may be added to the code example.

<Tabs defaultActiveKey="profile" id="tab-example-with-sr-notification">
  <Tab eventKey="home" title="Home">
    Hello I am the first panel.
  </Tab>
  <Tab
    eventKey="profile" 
    title="Profile" 
    notification={(
      <span>
        1
        <span className="sr-only">notification</span>
      </span>
    )}
  >
    Hello I am the second panel.
  </Tab>
</Tabs>

<Tabs defaultActiveKey="profile" id="tab-example-with-sr-notification">
  <Tab eventKey="home" title="Home">
    Hello I am the first panel.
  </Tab>
  <Tab
    eventKey="profile" 
    title="Profile" 
    notification={(
      <span>
        1
        <span className="sr-only">notification</span>
      </span>
    )}
  >
    Hello I am the second panel.
  </Tab>
</Tabs>

Responsive support

Show editable code example

Any Paragon component or export may be added to the code example.

<Tabs
  variant="tabs"
  defaultActiveKey="profile"
  id="uncontrolled-tab-example"
>
  <Tab eventKey="home" title="Home">
    Hello I am the first panel.
  </Tab>
  <Tab eventKey="dashboard" title="Dashboard">
    Hello I am the second panel.
  </Tab>
  <Tab eventKey="profile" title="Profile" notification={1}>
    Hello I am the third panel.
  </Tab>
  <Tab eventKey="products" title="Products">
    Hello I am the fourth panel.
  </Tab>
  <Tab eventKey="help" title="Help">
    Hello I am the fifth panel.
  </Tab>
  <Tab eventKey="about" title="About">
    Hello I am the sixth panel.
  </Tab>
  <Tab eventKey="updates" title="Updates">
    Hello I am the seventh panel.
  </Tab>
  <Tab eventKey="forum" title="Forum">
    Hello I am the eighth panel.
  </Tab>
  <Tab eventKey="job" title="Job">
    Hello I am the ninth panel.
  </Tab>
  <Tab eventKey="team" title="Our team">
    Hello I am the tenth panel.
  </Tab>
</Tabs>

<Tabs
  variant="tabs"
  defaultActiveKey="profile"
  id="uncontrolled-tab-example"
>
  <Tab eventKey="home" title="Home">
    Hello I am the first panel.
  </Tab>
  <Tab eventKey="dashboard" title="Dashboard">
    Hello I am the second panel.
  </Tab>
  <Tab eventKey="profile" title="Profile" notification={1}>
    Hello I am the third panel.
  </Tab>
  <Tab eventKey="products" title="Products">
    Hello I am the fourth panel.
  </Tab>
  <Tab eventKey="help" title="Help">
    Hello I am the fifth panel.
  </Tab>
  <Tab eventKey="about" title="About">
    Hello I am the sixth panel.
  </Tab>
  <Tab eventKey="updates" title="Updates">
    Hello I am the seventh panel.
  </Tab>
  <Tab eventKey="forum" title="Forum">
    Hello I am the eighth panel.
  </Tab>
  <Tab eventKey="job" title="Job">
    Hello I am the ninth panel.
  </Tab>
  <Tab eventKey="team" title="Our team">
    Hello I am the tenth panel.
  </Tab>
</Tabs>

Conditional rendering

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  const librariesEnabled = true;
  const visibleTabs = useMemo(() => {
    const tabs = [];
        
    tabs.push(
      <Tab
        key="courses"
        eventKey="courses"
        title="Courses"
      >
        Hello I am the courses panel.
      </Tab>
    );

    tabs.push(
      <Tab
        key="programs"
        eventKey="programs"
        title="Programs"
      >
        Hello I am the programs panel.
      </Tab>
    );
    
    if (librariesEnabled) {
      tabs.push(
        <Tab
          key="libraries"
          eventKey="libraries"
          title="Libraries"
        >
          Hello I am the libraries panel.
        </Tab>
      );   
    }

    return tabs;
  }, [librariesEnabled]);

  return (
    <Tabs
      id="tabs"
      defaultActiveKey="courses"
    >
      {visibleTabs}
    </Tabs>
  );
}

() => {
  const librariesEnabled = true;
  const visibleTabs = useMemo(() => {
    const tabs = [];
        
    tabs.push(
      <Tab
        key="courses"
        eventKey="courses"
        title="Courses"
      >
        Hello I am the courses panel.
      </Tab>
    );

    tabs.push(
      <Tab
        key="programs"
        eventKey="programs"
        title="Programs"
      >
        Hello I am the programs panel.
      </Tab>
    );
    
    if (librariesEnabled) {
      tabs.push(
        <Tab
          key="libraries"
          eventKey="libraries"
          title="Libraries"
        >
          Hello I am the libraries panel.
        </Tab>
      );   
    }

    return tabs;
  }, [librariesEnabled]);

  return (
    <Tabs
      id="tabs"
      defaultActiveKey="courses"
    >
      {visibleTabs}
    </Tabs>
  );
}

Theme Variables#

CSS Variable	Computed Value
‌	‌
‌	‌
‌	‌
‌	‌
‌	‌

Props API#

Tabs Props API

This is a pass through component from React-Bootstrap, see original props documentation here.

variant enum'tabs' | 'pills' | 'inverse-tabs' | 'inverse-pills' | 'button-group'
Specifies variant to use.
Default'tabs'
children node Required
Specifies elements that is processed to create tabs.
className string
Specifies class name to append to the base element.
moreTabText string
Specifies text for the 'More' tab.
Default'More...'
defaultActiveKey string
Specifies default active tab (uncontrolled usage).
activeKey string
Specifies active tab (controlled usage).

Tab Props API

This is a pass through component from React-Bootstrap, see original props documentation here.

title node Required
Specifies the Tab navigation title.
notification node
Specifies notification bubble content. It appears on the top right of the Tab.
disabled bool
Specifies whether Tab is disabled.
eventKey string | number
A unique identifier for the Component, the eventKey makes it distinguishable from others in a set. Similar to React's key prop, in that it only needs to be unique amongst the Components siblings, not globally.
tabClassName string
Specifies class name to append to the base element.

Usage Insights#

Tab

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	21.13.1	23
frontend-app-authn	22.11.2	6
frontend-app-course-authoring	22.8.1	7
frontend-app-learner-portal-enterprise	21.13.1	4
frontend-app-learner-portal-programs	21.13.1	1
frontend-app-learner-record	22.10.0	1
frontend-app-learning	22.10.0	1
frontend-app-support-tools	21.13.1	12
frontend-component-header-edx	21.13.1	1
prospectus	20.46.2	2

Tabs

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	21.13.1	8
frontend-app-authn	22.11.2	5
frontend-app-course-authoring	22.8.1	3
frontend-app-learner-portal-enterprise	21.13.1	1
frontend-app-learner-portal-programs	21.13.1	1
frontend-app-learner-record	22.10.0	1
frontend-app-learning	22.10.0	1
frontend-app-support-tools	21.13.1	3
frontend-component-header-edx	21.13.1	1
prospectus	20.46.2	1

Edit this page Leave feedback

Paragon Design System

Theme

Tabs

Uncontrolled usage

Controlled usage

Button group usage

Pills usage

Inverse-Pills usage

Inverse Tabs usage

With notification

Responsive support

Conditional rendering

Theme Variables#

Props API#

Usage Insights#

Tab

Tabs

All components (A-Z)

Theme

Tabs

Uncontrolled usage#

Controlled usage#

Button group usage#

Pills usage#

Inverse-Pills usage#

Inverse Tabs usage#

With notification#

With screen reader text in notification#

Responsive support#

Conditional rendering#

Theme Variables#

Props API#

Usage Insights#

Tab

Tabs

All components (A-Z)

Uncontrolled usage

Controlled usage

Button group usage

Pills usage

Inverse-Pills usage

Inverse Tabs usage

With notification

With screen reader text in notification

Responsive support

Conditional rendering