Rate this docs

React Bootstrap Tabs MDB Pro component

React Tabs - Bootstrap 4 & Material Design

React Bootstrap tabs are components which separate content placed in the same wrapper, but in the separate pane. Only one pane can be displayed at the time.

Bootstrap tabs are components which separate content placed in the same wrapper, but in the separate pane. Only one pane can be displayed at the time. Tabs available in MDB share general markup and styles, as well as the .naved element managing the active and disabled states.

MDB Tabs are compatible with ReactRouter, meaning that <NavLink> components inside can be used both for one-page tabs as well as general routing solution for main navigation. Make sure to include the wrapping <BrowserRouter>.

If you are using navs to provide a navigation bar, be sure to add a approptiate role attributes to the <NavLinks> (role="tab").


Material tabs

Material Design styling for Bootstrap Tabs component

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.


        import React from "react";
        import { MDBContainer, MDBRow, MDBCol, MDBTabPane, MDBTabContent, MDBNav, MDBNavItem, MDBNavLink, MDBIcon } from
        "mdbreact";
        import classnames from "classnames";

        class TabsPage extends React.Component {

        state = {
          activeItem: "1"
        }

        toggle = (tab) => {
          if (this.state.activeItem !== tab) {
            this.setState({
              activeItem: tab
            });
          }
        }

        render() {
            return (
              <MDBContainer className="mt-4">
                <MDBRow>
                  <MDBCol md="12">
                    <h2>Basic</h2>
                    <MDBNav tabs className="nav-justified">
                      <MDBNavItem>
                        <MDBNavLink to="#" className={classnames({ active: this.state.activeItem==="1" })} onClick={()=> {
                          this.toggle("1");
                          }}
                          role="tab"
                          >
                          <MDBIcon icon="user" /> Profile
                        </MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#" className={classnames({ active: this.state.activeItem==="2" })} onClick={()=> {
                          this.toggle("2");
                          }}
                          role="tab"
                          >
                          Follow
                        </MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#" className={classnames({ active: this.state.activeItem==="3" })} onClick={()=> {
                          this.toggle("3");
                          }}
                          role="tab"
                          >
                          Contact
                        </MDBNavLink>
                      </MDBNavItem>
                    </MDBNav>
                    <MDBTabContent className="card" activeItem={this.state.activeItem}>
                      <MDBTabPane tabId="1" role="tabpanel">
                        <p className="mt-2">
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                          Nihil odit magnam minima, soluta doloribus reiciendis
                          molestiae placeat unde eos molestias. Quisquam aperiam,
                          pariatur. Tempora, placeat ratione porro voluptate odit
                          minima.
                        </p>
                      </MDBTabPane>
                      <MDBTabPane tabId="2" role="tabpanel">
                        <p className="mt-2">
                          Quisquam aperiam, pariatur. Tempora, placeat ratione porro
                          voluptate odit minima. Lorem ipsum dolor sit amet,
                          consectetur adipisicing elit. Nihil odit magnam minima,
                          soluta doloribus reiciendis molestiae placeat unde eos
                          molestias.
                        </p>
                        <p>
                          Quisquam aperiam, pariatur. Tempora, placeat ratione porro
                          voluptate odit minima. Lorem ipsum dolor sit amet,
                          consectetur adipisicing elit. Nihil odit magnam minima,
                          soluta doloribus reiciendis molestiae placeat unde eos
                          molestias.
                        </p>
                      </MDBTabPane>
                      <MDBTabPane tabId="3" role="tabpanel">
                        <p className="mt-2">
                          Quisquam aperiam, pariatur. Tempora, placeat ratione porro
                          voluptate odit minima. Lorem ipsum dolor sit amet,
                          consectetur adipisicing elit. Nihil odit magnam minima,
                          soluta doloribus reiciendis molestiae placeat unde eos
                          molestias.
                        </p>
                      </MDBTabPane>
                    </MDBTabContent>

                  </MDBCol>
                </MDBRow>
              </MDBContainer>
            );
          }
        }

        export default TabsPage;
      

Pills within tabs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.


        import React from "react";
        import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBCardBody, MDBCardTitle, MDBCardText, MDBTabPane, MDBTabContent,
        MDBNav, MDBNavItem, MDBNavLink, MDBIcon } from "mdbreact";
        import classnames from "classnames";

        class TabsPage extends React.Component {

        state = {
          activeItemOuterTabs: "1",
          activeItemInnerPills: "1"
        }

        toggleOuterTabs = (tab) => {
          if (this.state.activeItemOuterTabs2 !== tab) {
            this.setState({
              activeItemOuterTabs: tab
            });
          }
        }

        toggleInnerPills = (tab) => {
          if (this.state.activeItemInnerPills !== tab) {
            this.setState({
              activeItemInnerPills: tab
            });
          }
        }

        render() {
          return (
              <MDBContainer>
                <MDBNav tabs className="nav-justified" color="indigo">
                  <MDBNavItem>
                    <MDBNavLink to="#" className={classnames({ active: this.state.activeItemOuterTabs==="1" })} onClick={()=> {
                      this.toggleOuterTabs("1");
                      }}
                      role="tab"
                      >
                      <MDBIcon icon="user" /> Profile
                    </MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBNavLink to="#" className={classnames({ active: this.state.activeItemOuterTabs==="2" })} onClick={()=> {
                      this.toggleOuterTabs("2");
                      }}
                      role="tab"
                      >
                      <MDBIcon icon="heart" /> Follow
                    </MDBNavLink>
                  </MDBNavItem>
                </MDBNav>
                <MDBTabContent className="card" activeItem={this.state.activeItemOuterTabs}>
                  <MDBTabPane tabId="1" role="tabpanel">
                    <MDBRow>
                      <MDBCol md="3">
                        <MDBNav pills color="primary" className="flex-column">
                          <MDBNavItem>
                            <MDBNavLink to="#" className={classnames({ active: this.state.activeItemInnerPills==="1" })} onClick={()=>
                              {
                              this.toggleInnerPills("1");
                              }}
                              >
                              Downloads
                              <MDBIcon icon="download" className="ml-2" />
                            </MDBNavLink>
                          </MDBNavItem>
                          <MDBNavItem>
                            <MDBNavLink to="#" className={classnames({ active: this.state.activeItemInnerPills==="2" })} onClick={()=>
                              {
                              this.toggleInnerPills("2");
                              }}
                              >
                              Orders & invoices
                              <MDBIcon icon="file-text" className="ml-2" />
                            </MDBNavLink>
                          </MDBNavItem>
                          <MDBNavItem>
                            <MDBNavLink to="#" className={classnames({ active: this.state.activeItemInnerPills==="3" })} onClick={()=>
                              {
                              this.toggleInnerPills("3");
                              }}
                              >
                              Billing Details
                              <MDBIcon icon="address-card" className="ml-2" />
                            </MDBNavLink>
                          </MDBNavItem>
                        </MDBNav>
                      </MDBCol>
                      <MDBCol md="9">
                        <MDBTabContent activeItem={this.state.activeItemInnerPills}>
                          <MDBTabPane tabId="1">
                            <MDBCardBody>
                              <MDBCardTitle>Downloads</MDBCardTitle>
                              <MDBCardText>Completely legal</MDBCardText>
                            </MDBCardBody>
                          </MDBTabPane>
                          <MDBTabPane tabId="2">
                            <MDBCardBody>
                              <MDBCardTitle>Orders & Invoices</MDBCardTitle>
                              <MDBCardText>
                                "Hello? Is it me you're looking for?"
                              </MDBCardText>
                            </MDBCardBody>
                          </MDBTabPane>
                          <MDBTabPane tabId="3">
                            <MDBCardBody>
                              <MDBCardTitle>Billing Details</MDBCardTitle>
                              <MDBCardText>
                                Time to pay{" "}
                                <MDBBtn className="ml-3" color="secondary">
                                  pay
                                </MDBBtn>
                              </MDBCardText>
                            </MDBCardBody>
                          </MDBTabPane>
                        </MDBTabContent>
                      </MDBCol>
                    </MDBRow>
                  </MDBTabPane>
                  <MDBTabPane tabId="2" role="tabpanel">
                    <MDBRow>
                      <MDBCol md="6">
                        <MDBCardBody>
                          <MDBCardTitle>Special Title Treatment</MDBCardTitle>
                          <MDBCardText>
                            With supporting text below as a natural lead-in to
                            additional content.
                          </MDBCardText>
                          <MDBBtn>Go somewhere</MDBBtn>
                        </MDBCardBody>
                      </MDBCol>
                      <MDBCol md="6">
                        <MDBCardBody>
                          <MDBCardTitle>Special Title Treatment</MDBCardTitle>
                          <MDBCardText>
                            With supporting text below as a natural lead-in to
                            additional content.
                          </MDBCardText>
                          <MDBBtn>Go somewhere</MDBBtn>
                        </MDBCardBody>
                      </MDBCol>
                    </MDBRow>
                  </MDBTabPane>
                </MDBTabContent>
              </MDBContainer>
            );
          }
        }

        export default TabsPage;
      

Classic tabs

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


        import React from "react";
        import { MDBContainer, MDBTabPane, MDBTabContent, MDBNav, MDBNavItem, MDBNavLink } from "mdbreact";
        import classnames from "classnames";

        class TabsPage extends React.Component {

          state = {
            activeItemClassicTabs1: "1",
          }

          toggleClassicTabs1 = (tab) => {
            if (this.state.activeItemClassicTabs1 !== tab) {
              this.setState({
                activeItemClassicTabs1: tab
              });
            }
          }

          render() {
            return (
                <MDBContainer>
                <div className="classic-tabs">
                  <MDBNav classicTabs color="cyan">
                    <MDBNavItem>
                      <MDBNavLink
                        to="#"
                        className={classnames({
                          active: this.state.activeItemClassicTabs1 === "1"
                        })}
                        onClick={() => {
                          this.toggleClassicTabs1("1");
                        }}
                      >
                        Profile
                              </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink
                        to="#"
                        className={classnames({
                          active: this.state.activeItemClassicTabs1 === "2"
                        })}
                        onClick={() => {
                          this.toggleClassicTabs1("2");
                        }}
                      >
                        Follow
                              </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink
                        to="#"
                        className={classnames({
                          active: this.state.activeItemClassicTabs1 === "3"
                        })}
                        onClick={() => {
                          this.toggleClassicTabs1("3");
                        }}
                      >
                        Contact
                              </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink
                        to="#"
                        className={classnames({
                          active: this.state.activeItemClassicTabs1 === "4"
                        })}
                        onClick={() => {
                          this.toggleClassicTabs1("4");
                        }}
                      >
                        Be Awesome
                              </MDBNavLink>
                    </MDBNavItem>
                  </MDBNav>
                  <MDBTabContent
                    className="card"
                    activeItem={this.state.activeItemClassicTabs1}
                  >
                    <MDBTabPane tabId="1">
                      <p>
                        Quisquam aperiam, pariatur. Tempora, placeat ratione
                        porro voluptate odit minima. Lorem ipsum dolor sit amet,
                        consectetur adipisicing elit. Nihil odit magnam minima,
                        soluta doloribus reiciendis molestiae placeat unde eos
                        molestias.
                              </p>
                    </MDBTabPane>
                    <MDBTabPane tabId="2">
                      <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing
                        elit. Nihil odit magnam minima, soluta doloribus
                        reiciendis molestiae placeat unde eos molestias.
                        Quisquam aperiam, pariatur. Tempora, placeat ratione
                        porro voluptate odit minima.
                              </p>
                    </MDBTabPane>
                    <MDBTabPane tabId="3">
                      <p>
                        Quisquam aperiam, pariatur. Tempora, placeat ratione
                        porro voluptate odit minima. Lorem ipsum dolor sit amet,
                        consectetur adipisicing elit. Nihil odit magnam minima,
                        soluta doloribus reiciendis molestiae placeat unde eos
                        molestias.
                              </p>
                    </MDBTabPane>
                    <MDBTabPane tabId="4">
                      <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing
                        elit. Nihil odit magnam minima, soluta doloribus
                        reiciendis molestiae placeat unde eos molestias.
                        Quisquam aperiam, pariatur. Tempora, placeat ratione
                        porro voluptate odit minima.
                              </p>
                    </MDBTabPane>
                  </MDBTabContent>
                </div>
              </MDBContainer>
            );
          }
        }

        export default TabsPage;
      

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


        import React from "react";
        import { MDBContainer, MDBTabPane, MDBTabContent, MDBNav, MDBNavItem, MDBNavLink, MDBIcon } from "mdbreact";
        import classnames from "classnames";

        class TabsPage extends React.Component {

        state = {
          activeItemClassicTabs2: "1"
        }


        toggleClassicTabs2 = (tab) => {
          if (this.state.activeItemClassicTabs2 !== tab) {
            this.setState({
            activeItemClassicTabs2: tab
            });
          }
        }

        render() {
          return (
              <MDBContainer>
                <div className="classic-tabs">
                  <MDBNav classicTabs color="orange" className="mt-5">
                    <MDBNavItem>
                      <MDBNavLink to="#" className={classnames({ active: this.state.activeItemClassicTabs2==="1" })} onClick={()=> {
                        this.toggleClassicTabs2("1");
                        }}
                        >
                        <MDBIcon icon="user" size="2x" />
                        <br />
                        Profile
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink to="#" className={classnames({ active: this.state.activeItemClassicTabs2==="2" })} onClick={()=> {
                        this.toggleClassicTabs2("2");
                        }}
                        >
                        <MDBIcon icon="heart" size="2x" />
                        <br />
                        Follow
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink to="#" className={classnames({ active: this.state.activeItemClassicTabs2==="3" })} onClick={()=> {
                        this.toggleClassicTabs2("3");
                        }}
                        >
                        <MDBIcon icon="envelope" size="2x" />
                        <br />
                        Contact
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink to="#" className={classnames({ active: this.state.activeItemClassicTabs2==="4" })} onClick={()=> {
                        this.toggleClassicTabs2("4");
                        }}
                        >
                        <MDBIcon icon="star" size="2x" />
                        <br />
                        Be Awesome
                      </MDBNavLink>
                    </MDBNavItem>
                  </MDBNav>
                  <MDBTabContent className="card mb-5" activeItem={this.state.activeItemClassicTabs2}>
                    <MDBTabPane tabId="1">
                      <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing
                        elit. Nihil odit magnam minima, soluta doloribus
                        reiciendis molestiae placeat unde eos molestias.
                        Quisquam aperiam, pariatur. Tempora, placeat ratione
                        porro voluptate odit minima.
                      </p>
                    </MDBTabPane>
                    <MDBTabPane tabId="2">
                      <p>
                        Quisquam aperiam, pariatur. Tempora, placeat ratione
                        porro voluptate odit minima. Lorem ipsum dolor sit amet,
                        consectetur adipisicing elit. Nihil odit magnam minima,
                        soluta doloribus reiciendis molestiae placeat unde eos
                        molestias.
                      </p>
                    </MDBTabPane>
                    <MDBTabPane tabId="3">
                      <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing
                        elit. Nihil odit magnam minima, soluta doloribus
                        reiciendis molestiae placeat unde eos molestias.
                        Quisquam aperiam, pariatur. Tempora, placeat ratione
                        porro voluptate odit minima.
                      </p>
                    </MDBTabPane>
                    <MDBTabPane tabId="4">
                      <p>
                        Quisquam aperiam, pariatur. Tempora, placeat ratione
                        porro voluptate odit minima. Lorem ipsum dolor sit amet,
                        consectetur adipisicing elit. Nihil odit magnam minima,
                        soluta doloribus reiciendis molestiae placeat unde eos
                        molestias.
                      </p>
                    </MDBTabPane>
                  </MDBTabContent>
                </div>
              </MDBContainer>
            );
          }
        }

        export default TabsPage;
      

React Tabs - API

In this section you will find advanced information about the Tabs component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.


Import statement

Tabs use other components such as Navigation or Buttons as controls, so make sure you have imported proper modules first.


        import { MDBTabPane, MDBTabContent } from 'mdbreact';
      

API Reference: TabContent Properties

The table below shows the configuration options of the MDBTabContent component.

Name Type Default Description Example
activeItem String Active TabPane id - use this prop to control the component <MDBTabContent activeItem={this.state.activeTab} />
className String Sets custom classes, use class card to achieve card-like effect (you can use Card subcomponents inside) <MDBTabContent className="card" />

API Reference: TabPane Properties

The table below shows the configuration options of the MDBTabPane component.

Name Type Default Description Example
className String Adds custom classes <MDBTabPane className="customClass" />
tabId String Indicates active pane <MDBTabPane tabId="tab1" />