web
mobile
Edit these docs Rate these docs

React Bootstrap Tabs

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").


Default tabs

Default styling for Bootstrap Tabs component

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.

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


              import React, { Component } from "react";
              import { MDBContainer, MDBTabPane, MDBTabContent, MDBNav, MDBNavItem, MDBNavLink } from "mdbreact";
              
              class TabsDefault extends Component {
                state = {
                  activeItem: "1"
                };
              
                toggle = tab => e => {
                  if (this.state.activeItem !== tab) {
                    this.setState({
                      activeItem: tab
                    });
                  }
                };
              
                render() {
                  return (
                    <MDBContainer>
                    <MDBNav className="nav-tabs mt-5">
                      <MDBNavItem>
                        <MDBNavLink to="#" active={this.state.activeItem === "1"} onClick={this.toggle("1")} role="tab" >
                          Home
                        </MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#" active={this.state.activeItem === "2"} onClick={this.toggle("2")} role="tab" >
                          Profile
                        </MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#" active={this.state.activeItem === "3"} onClick={this.toggle("3")} role="tab" >
                          Profile
                        </MDBNavLink>
                      </MDBNavItem>
                    </MDBNav>
                    <MDBTabContent 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>
                  </MDBContainer>
                );
              }
            }
            export default TabsDefault;
  
            

Material tabs MDB Pro component

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, { Component } from "react";
                  import { MDBContainer, MDBRow, MDBCol, MDBTabPane, MDBTabContent, MDBNav, MDBNavItem, MDBNavLink, MDBIcon } from
                  "mdbreact";
          
                  class TabsMaterial extends Component {
                  state = {
                    activeItem: "1"
                  }
          
                  toggle = tab => () => {
                    if (this.state.activeItem !== tab) {
                    this.setState({
                      activeItem: tab
                    });
                    }
                  }
          
                  render() {
                      return (
                        <MDBContainer>
                            <MDBNav tabs>
                            <MDBNavItem>
                              <MDBNavLink
                                to="#"
                                active={this.state.activeItem === "1"}
                                onClick={this.toggle("1")}
                                role="tab"
                              >
                                <MDBIcon icon="user" /> Profile
                              </MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem>
                              <MDBNavLink
                                to="#"
                                active={this.state.activeItem === "2"}
                                onClick={this.toggle("2")}
                                role="tab"
                              >
                                <MDBIcon icon="heart" /> Follow
                              </MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem>
                              <MDBNavLink
                                to="#"
                                active={this.state.activeItem === "3"}
                                onClick={this.toggle("3")}
                                role="tab"
                              >
                                <MDBIcon icon="envelope" /> Contact
                              </MDBNavLink>
                            </MDBNavItem>
                          </MDBNav>
                          <MDBTabContent
                            className="card"
                            activeItem={this.state.activeItem}
                          >
                            <MDBTabPane tabId="1" role="tabpanel">
                              <p className="mt-2">
                                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.
                              </p>
                            </MDBTabPane>
                            <MDBTabPane tabId="2" role="tabpanel">
                              <p className="mt-2">
                                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.
                              </p>
                            </MDBTabPane>
                            <MDBTabPane tabId="3" role="tabpanel">
                              <p className="mt-2">
                                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.
                              </p>
                            </MDBTabPane>
                          </MDBTabContent>
                        </MDBContainer>
                      );
                    }
                  }
          
                  export default TabsMaterial;
                

Tabs with dropdown MDB Pro component

Add dropdown menus with a little extra HTML and the dropdowns React plugin.


        import React, { Component } from "react";
        import { MDBContainer, MDBNav, MDBNavItem, MDBNavLink, MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem } from "mdbreact";

        class TabsDropdown extends Component {
        render() {
          return (
            <MDBContainer>
                <MDBNav tabs>
                  <MDBNavItem>
                    <MDBNavLink active to="#!">Active</MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBDropdown>
                      <MDBDropdownToggle nav caret color="default">Dropdown</MDBDropdownToggle>
                      <MDBDropdownMenu color="default">
                        <MDBDropdownItem>Action</MDBDropdownItem>
                        <MDBDropdownItem>Another Action</MDBDropdownItem>
                        <MDBDropdownItem>Something else here</MDBDropdownItem>
                        <MDBDropdownItem divider />
                        <MDBDropdownItem>Separated link</MDBDropdownItem>
                      </MDBDropdownMenu>
                    </MDBDropdown>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBNavLink to="#!">Link</MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem className='disabled'>
                    <MDBNavLink disabled to="#!">Disabled</MDBNavLink>
                  </MDBNavItem>
                </MDBNav>
              </MDBContainer>
            );
          }
        }
        export default TabsDropdown;
      

Tabs justified MDB Pro 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, { Component } from "react";
        import { MDBContainer, MDBRow, MDBCol, MDBTabPane, MDBTabContent, MDBNav, MDBNavItem, MDBNavLink, MDBIcon } from
        "mdbreact";

        class TabsJustified extends Component {
        state = {
          activeItemJustified: "1"
        }

        toggleJustified = tab => e => {
          if (this.state.activeItemJustified !== tab) {
            this.setState({
              activeItemJustified: tab
            });
          }
        };

        render() {
            return (
              <MDBContainer>
                <MDBNav tabs className="nav-justified" color='indigo'>
                  <MDBNavItem>
                    <MDBNavLink to="#" active={this.state.activeItemJustified === "1"} onClick={this.toggleJustified("1")} role="tab" >
                      <MDBIcon icon="user" /> Profile
                    </MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBNavLink to="#" active={this.state.activeItemJustified === "2"} onClick={this.toggleJustified("2")} role="tab" >
                      <MDBIcon icon="heart" /> Follow
                    </MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBNavLink to="#" active={this.state.activeItemJustified === "3"} onClick={this.toggleJustified("3")} role="tab" >
                      <MDBIcon icon="envelope" /> Contact
                    </MDBNavLink>
                  </MDBNavItem>
                </MDBNav>
                <MDBTabContent
                  className="card"
                  activeItem={this.state.activeItemJustified}
                >
                  <MDBTabPane tabId="1" role="tabpanel">
                    <p className="mt-2">
                      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.
                    </p>
                  </MDBTabPane>
                  <MDBTabPane tabId="2" role="tabpanel">
                    <p className="mt-2">
                      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.
                    </p>
                  </MDBTabPane>
                  <MDBTabPane tabId="3" role="tabpanel">
                    <p className="mt-2">
                      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.
                    </p>
                  </MDBTabPane>
                </MDBTabContent>
              </MDBContainer>
            );
          }
        }

        export default TabsJustified;
      

Pills within tabs MDB Pro component

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, { Component } from "react";
          import {
            MDBContainer,
            MDBTabPane,
            MDBTabContent,
            MDBNav,
            MDBNavItem,
            MDBNavLink,
            MDBRow,
            MDBCol,
            MDBBtn,
            MDBCardBody,
            MDBCardTitle,
            MDBCardText,
            MDBIcon,
          } from "mdbreact";
          
          class PillsWithinTheTabs extends Component {
            state = {
              activeItemOuterTabs: "1",
              activeItemInnerPills: "1",
            };
          
            toggleOuterTabs = tab => e => {
              if (this.state.activeItemOuterTabs2 !== tab) {
                this.setState({
                  activeItemOuterTabs: tab
                });
              }
            };
          
            toggleInnerPills = tab => e => {
              if (this.state.activeItemInnerPills !== tab) {
                this.setState({
                  activeItemInnerPills: tab
                });
              }
            };
          
            render() {
              return (
                <MDBContainer>
                  <h2 className="mt-5">Pills within the tabs</h2>
                  <MDBNav tabs className="nav-justified" color="primary">
                    <MDBNavItem>
                      <MDBNavLink to="#" active={this.state.activeItemOuterTabs === "1"} onClick={this.toggleOuterTabs("1")} role="tab" >
                        <MDBIcon icon="user" /> Profile
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink to="#" active={this.state.activeItemOuterTabs === "2"} onClick={this.toggleOuterTabs("2")} role="tab" >
                        <MDBIcon icon="heart" /> Follow
                      </MDBNavLink>
                    </MDBNavItem>
                  </MDBNav>
                  <MDBTabContent
                    className="card mb-5"
                    activeItem={this.state.activeItemOuterTabs}
                  >
                    <MDBTabPane tabId="1" role="tabpanel">
                      <MDBRow>
                        <MDBCol md="3">
                          <MDBNav pills color="primary" className="flex-column">
                            <MDBNavItem>
                              <MDBNavLink to="#" active={ this.state.activeItemInnerPills === "1"} onClick={this.toggleInnerPills("1")} >
                                Downloads <MDBIcon icon="download" className="ml-2" />
                              </MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem>
                              <MDBNavLink to="#" active={ this.state.activeItemInnerPills === "2"} onClick={this.toggleInnerPills("2")} >
                                Orders & invoices
                                <MDBIcon icon="file-alt" className="ml-2" />
                              </MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem>
                              <MDBNavLink to="#" 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">
                              <h5>Panel 1</h5>
                            </MDBTabPane>
                            <MDBTabPane tabId="2">
                              <h5>Panel 2</h5>
                            </MDBTabPane>
                            <MDBTabPane tabId="3">
                              <h5>Panel 3</h5>
                            </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 PillsWithinTheTabs
          
      

Classic tabs MDB Pro component

With border

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, { Component } from "react";
        import {   MDBContainer, MDBTabPane, MDBTabContent, MDBNav, MDBNavItem, MDBNavLink, MDBIcon } from "mdbreact";

        class TabsClassic1 extends Component {
          state = {
            activeItemClassicTabs1: "1"
          };
        
          toggleClassicTabs1 = tab => () => {
            if (this.state.activeItemClassicTabs1 !== tab) {
              this.setState({
                activeItemClassicTabs2: tab
              });
            }
          };
        
          render() {
            return (
              <MDBContainer className="classic-tabs">
                  <MDBNav classicTabs color="orange" className="mt-5">
                    <MDBNavItem>
                      <MDBNavLink to="#" active={ this.state.activeItemClassicTabs1 === "1"} onClick={this.toggleClassicTabs1("1")} >
                        <MDBIcon icon="user" size="2x" />
                        <br />
                        Profile
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink to="#" active={ this.state.activeItemClassicTabs1 === "2"} onClick={this.toggleClassicTabs1("2")} >
                        <MDBIcon icon="heart" size="2x" />
                        <br />
                        Follow
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink to="#" active={ this.state.activeItemClassicTabs1 === "3"} onClick={this.toggleClassicTabs1("3")} >
                        <MDBIcon icon="envelope" size="2x" />
                        <br />
                        Contact
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink to="#" active={ this.state.activeItemClassicTabs1 === "4"} onClick={this.toggleClassicTabs1("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>
                        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.
                      </p>
                    </MDBTabPane>
                    <MDBTabPane tabId="2">
                      <p>
                        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?
                      </p>
                    </MDBTabPane>
                    <MDBTabPane tabId="3">
                      <p>
                        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.
                      </p>
                    </MDBTabPane>
                    <MDBTabPane tabId="4">
                      <p>
                        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.
                      </p>
                    </MDBTabPane>
                  </MDBTabContent>
                </MDBContainer>
            );
          }
        }

        export default TabsClassic1;
      

With shadow

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, { Component } from "react";
        import {   MDBContainer, MDBTabPane, MDBTabContent, MDBNav, MDBNavItem, MDBNavLink, } from "mdbreact";

        class TabsClassic2 extends 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="cyan">
                    <MDBNavItem>
                      <MDBNavLink to="#" active={this.state.activeItemClassicTabs2 === "1"} onClick={this.toggleClassicTabs2("1")}>
                        Profile
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink to="#" active={this.state.activeItemClassicTabs2 === "2"} onClick={this.toggleClassicTabs2("2")}>
                        Follow
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink to="#" active={this.state.activeItemClassicTabs2 === "3"} onClick={this.toggleClassicTabs2("3")}>
                        Contact
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink to="#" active={this.state.activeItemClassicTabs2 === "4"} onClick={this.toggleClassicTabs2("4")}>
                        Be Awesome
                      </MDBNavLink>
                    </MDBNavItem>
                  </MDBNav>
                  <MDBTabContent
                    className="card"
                    activeItem={this.state.activeItemClassicTabs1}
                  >
                    <MDBTabPane tabId="1">
                      <p>
                        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.
                      </p>
                    </MDBTabPane>
                    <MDBTabPane tabId="2">
                      <p>
                        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?
                      </p>
                    </MDBTabPane>
                    <MDBTabPane tabId="3">
                      <p>
                        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.
                      </p>
                    </MDBTabPane>
                    <MDBTabPane tabId="4">
                      <p>
                        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.
                      </p>
                    </MDBTabPane>
                  </MDBTabContent>
                </div>
              </MDBContainer>
            );
          }
        }

        export default TabsClassic2;
      

Color options:

  • cyan
  • orange
  • grey
  • pink
  • green
  • primary

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, { Component } from "react";
        import { MDBContainer, MDBTabPane, MDBTabContent, MDBNav, MDBNavItem, MDBNavLink, MDBIcon } from "mdbreact";

        class TabsPage extends Component {
        state = {
          activeItemClassicTabs3: "1"
        }


        toggleClassicTabs3 = tab => () => {
          if (this.state.activeItemClassicTabs3 !== tab) {
          this.setState({
            activeItemClassicTabs3: tab
          });
          }
        }

        render() {
            return (
            <MDBContainer>
              <div className="classic-tabs">
                <MDBNav classicTabs color="orange" className="mt-5">
                  <MDBNavItem>
                    <MDBNavLink to="#" active={this.state.activeItemClassicTabs3==="1"} onClick={this.toggleClassicTabs3("1")}>
                      <MDBIcon icon="user" size="2x" />
                      <br />
                      Profile
                    </MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBNavLink to="#" active={this.state.activeItemClassicTabs3==="2"} onClick={this.toggleClassicTabs3("2")}>
                      <MDBIcon icon="heart" size="2x" />
                      <br />
                      Follow
                    </MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBNavLink to="#" active={this.state.activeItemClassicTabs3==="3"} onClick={this.toggleClassicTabs3("3")}>
                      <MDBIcon icon="envelope" size="2x" />
                      <br />
                      Contact
                    </MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBNavLink to="#" active={this.state.activeItemClassicTabs3==="4"} onClick={this.toggleClassicTabs3("4")}>
                      <MDBIcon icon="star" size="2x" />
                      <br />
                      Be Awesome
                    </MDBNavLink>
                  </MDBNavItem>
                </MDBNav>
                <MDBTabContent className="card mb-5" activeItem={this.state.activeItemClassicTabs3}>
                  <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 TabsClassic3;
      
Edit these docs Rate these docs

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" />