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>
  );
}

Tabs.Deprecated

(Deprecated) basic usage

Show editable code example

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

<Tabs.Deprecated
  labels={[
    'Panel 1',
    'Panel 2',
    'Panel 3'
  ]}
>
  <div>Hello I am the first panel</div>
  <div>Hello I am the second panel</div>
  <div>Hello I am the third panel</div>
</Tabs.Deprecated>

<Tabs.Deprecated
  labels={[
    'Panel 1',
    'Panel 2',
    'Panel 3'
  ]}
>
  <div>Hello I am the first panel</div>
  <div>Hello I am the second panel</div>
  <div>Hello I am the third panel</div>
</Tabs.Deprecated>

Theme Variables (SCSS)#

$tab-notification-height:                                    1rem !default;
$tab-notification-width:                                     1rem !default;
$tab-notification-font-size:                                 $font-size-xs !default;
$tab-more-link-dropdown-toggle-padding-x:                    .7rem !default;
$tab-more-link-dropdown-toggle-padding-y:                    $spacer !default;
$tab-more-link-dropdown-toggle-focus-bg:                     $primary-500 !default;
$tab-more-link-dropdown-toggle-focus-border-color:           $tab-more-link-dropdown-toggle-focus-bg !default;
$tab-more-link-dropdown-toggle-focus-color:                  $white !default;
$tab-more-link-dropdown-toggle-btn-focus-color:              $tab-more-link-dropdown-toggle-focus-color !default;
$tab-more-link-dropdown-toggle-btn-focus-border-color:       $tab-more-link-dropdown-toggle-focus-bg !default;
$tab-more-link-dropdown-toggle-active-color:                 $tab-more-link-dropdown-toggle-focus-color !default;
$tab-more-link-dropdown-toggle-hover-color:                  $tab-more-link-dropdown-toggle-focus-bg !default;
$tab-inverse-pills-link-dropdown-toggle-padding-x:           .625rem !default;
$tab-inverse-pills-link-dropdown-toggle-padding-y:           $spacer !default;
$tab-inverse-pills-link-dropdown-toggle-focus-bg:            $white !default;
$tab-inverse-pills-link-dropdown-toggle-focus-color:         $primary-500 !default;
$tab-inverse-pills-link-dropdown-toggle-focus-border-color:  $tab-inverse-pills-link-dropdown-toggle-focus-bg !default;
$tab-inverse-pills-link-dropdown-toggle-active-color:  $tab-inverse-pills-link-dropdown-toggle-focus-color !default;
$tab-inverse-pills-link-dropdown-toggle-active-hover-color:  $tab-inverse-pills-link-dropdown-toggle-focus-bg !default;
$tab-inverse-pills-link-dropdown-toggle-active-hover-bg:     $primary-300 !default;
$tab-inverse-pills-link-dropdown-distance:                   5px !default;
$tab-inverse-tabs-link-dropdown-toggle-padding-x:            .625rem !default;
$tab-inverse-tabs-link-dropdown-toggle-padding-y:            $spacer !default;
$tab-inverse-tabs-link-dropdown-toggle-hover-bg:             transparent !default;

Props API#

Tabs Props API

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

labels node[] Required
specifies the list of elements that will be displayed within each of the tabbed views. It is the content relevant to each label. Children should not be passed as Props, but should instead be nested between the opening and closing <Tabs> </Tabs> tags.
children element[] Required
specifies the list of headings that will appear on all of the tabs that will be created.

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.10.0	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.8.1	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.10.0	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.8.1	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

Tabs.Deprecated

(Deprecated) basic usage

Theme Variables (SCSS)#

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#

Tabs.Deprecated#

(Deprecated) basic usage#

Theme Variables (SCSS)#

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

Tabs.Deprecated

(Deprecated) basic usage