React Bootstrap Pills

React Pills - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

React Bootstrap pills are simple navigation components that expedite browsing through various options in the layout.

They allow you to fit a lot of information in single space.

See the following pills examples:


Default pills

Default styling for Bootstrap Pills component

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.
Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.
        
            
          import React, { Component } from "react";
          import { 
            MDBContainer, 
            MDBRow, 
            MDBCol, 
            MDBTabPane, 
            MDBTabContent, 
            MDBNav, 
            MDBNavItem, 
            MDBNavLink 
          } from "mdbreact";

          class Pills extends Component {
            state = {
              items: {
                default: "1",
              }
            };

            togglePills = (type, tab) => e => {
              e.preventDefault();
              if (this.state.items[type] !== tab) {
                let items = { ...this.state.items };
                items[type] = tab;
                this.setState({
                  items
                });
              }
            };

            render() {
              return (
                <MDBContainer className="mt-4">
                    <MDBRow>
                      <MDBCol md="12">
                        <h2>Default</h2>
                        <MDBNav className="mt-5 nav-pills">
                          <MDBNavItem>
                            <MDBNavLink link to="#" active={this.state.items["default"] === "1"} onClick={this.togglePills("default", "1")} >
                              Home
                            </MDBNavLink>
                          </MDBNavItem>
                          <MDBNavItem>
                            <MDBNavLink link to="#" active={this.state.items["default"] === "2"} onClick={this.togglePills("default", "2")} >
                              Profile
                            </MDBNavLink>
                          </MDBNavItem>
                          <MDBNavItem>
                            <MDBNavLink link to="#" active={this.state.items["default"] === "3"} onClick={this.togglePills("default", "3")} >
                              Contact
                            </MDBNavLink>
                          </MDBNavItem>
                        </MDBNav>
                        <MDBTabContent activeItem={this.state.items["default"]}>
                          <MDBTabPane tabId="1">
                            <p>
                              Consequat occaecat ullamco amet non eiusmod nostrud dolore
                              irure incididunt est duis anim sunt officia. Fugiat velit
                              proident aliquip nisi incididunt nostrud exercitation
                              proident est nisi. Irure magna elit commodo anim ex veniam
                              culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod
                              consequat eu adipisicing minim anim aliquip cupidatat culpa
                              excepteur quis. Occaecat sit eu exercitation irure Lorem
                              incididunt nostrud.
                            </p>
                          </MDBTabPane>
                          <MDBTabPane tabId="2">
                            <p>
                              Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa
                              mollit commodo mollit ex. Aute sunt incididunt amet commodo
                              est sint nisi deserunt pariatur do. Aliquip ex eiusmod
                              voluptate exercitation cillum id incididunt elit sunt. Qui
                              minim sit magna Lorem id et dolore velit Lorem amet
                              exercitation duis deserunt. Anim id labore elit adipisicing
                              ut in id occaecat pariatur ut ullamco ea tempor duis.
                            </p>
                          </MDBTabPane>
                          <MDBTabPane tabId="3">
                            <p>
                              Est quis nulla laborum officia ad nisi ex nostrud culpa
                              Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis
                              ipsum nisi elit fugiat commodo sunt reprehenderit laborum
                              veniam eu veniam. Eiusmod minim exercitation fugiat irure ex
                              labore incididunt do fugiat commodo aliquip sit id deserunt
                              reprehenderit aliquip nostrud. Amet ex cupidatat excepteur
                              aute veniam incididunt mollit cupidatat esse irure officia
                              elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit
                              labore ipsum laboris ipsum commodo sunt tempor enim
                              incididunt. Commodo quis sunt dolore aliquip aute tempor
                              irure magna enim minim reprehenderit. Ullamco consectetur
                              culpa veniam sint cillum aliqua incididunt velit ullamco
                              sunt ullamco quis quis commodo voluptate. Mollit nulla
                              nostrud adipisicing aliqua cupidatat aliqua pariatur mollit
                              voluptate voluptate consequat non.
                            </p>
                          </MDBTabPane>
                        </MDBTabContent>
                      </MDBCol>
                    </MDBRow>
                  </MDBContainer>
                );
              }
          }

          export default Pills;
        
        
    

Material pills MDB Pro component

Material Design styling for Bootstrap Pills 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.

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. 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 
          } from "mdbreact";

          class Pills extends Component {
            state = {
              items: {
                default: "1",
              }
            };

            togglePills = (type, tab) => e => {
              e.preventDefault();
              if (this.state.items[type] !== tab) {
                let items = { ...this.state.items };
                items[type] = tab;
                this.setState({
                  items
                });
              }
            };

          render() {
            return (
                <MDBContainer>
                  <MDBNav pills color="secondary">
                    <MDBNavItem>
                      <MDBNavLink
                        link
                        to="#"
                        active={this.state.items["default"] === "1"}
                        onClick={this.togglePills("default", "1")}
                      >
                        Active
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink
                        link
                        to="#"
                        active={this.state.items["default"] === "2"}
                        onClick={this.togglePills("default", "2")}
                      >
                        Link
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink
                        link
                        to="#"
                        active={this.state.items["default"] === "3"}
                        onClick={this.togglePills("default", "3")}
                      >
                        Link
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink
                        link
                        to="#"
                        active={this.state.items["default"] === "4"}
                        onClick={this.togglePills("default", "4")}
                      >
                        Help
                      </MDBNavLink>
                    </MDBNavItem>
                  </MDBNav>
                  <MDBTabContent activeItem={this.state.items["default"]}>
                    <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>
                        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>
                        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>
                      <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>
                        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>
                </MDBContainer>
              );
            }
          }

          export default Pills;
        
        
    

Pills justified MDB Pro component

        
            
        import React, { Component } from "react"; 
        import { MDBContainer, MDBNav, MDBNavItem, MDBNavLink } from "mdbreact";

        class PillsJustified extends Component {
          state = {
            items: {
              justified: "1"
            }
          };

          togglePills = (type, tab) => e => {
            e.preventDefault();
            if (this.state.items[type] !== tab) {
              let items = { ...this.state.items };
              items[type] = tab;
              this.setState({
                items
              });
            }
          };


          render() {
            return (
              <MDBContainer>
                <MDBNav pills color="pink" className="nav-justified">
                  <MDBNavItem>
                    <MDBNavLink
                      link
                      to="#"
                      active={this.state.items["justified"] === "1"}
                      onClick={this.togglePills("justified", "1")}
                    >
                      Active
                    </MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBNavLink
                      link
                      to="#"
                      active={this.state.items["justified"] === "2"}
                      onClick={this.togglePills("justified", "2")}
                    >
                      Link
                    </MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBNavLink
                      link
                      to="#"
                      active={this.state.items["justified"] === "3"}
                      onClick={this.togglePills("justified", "3")}
                    >
                      Link
                    </MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBNavLink
                      link
                      to="#"
                      active={this.state.items["justified"] === "4"}
                      onClick={this.togglePills("justified", "4")}
                    >
                      Help
                    </MDBNavLink>
                  </MDBNavItem>
                </MDBNav>
              </MDBContainer>
            );
          }
        }

        export default PillsJustified;
        
        
    

Pills with dropdown MDB Pro component

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

        class PillsDropdown extends Component {
          state = {
            items: {
              dropdown: "1"
            }
          }

          togglePills = (type, tab) => e => {
            e.preventDefault();
            if (this.state.items[type] !== tab) {
              let items = { ...this.state.items };
              items[type] = tab;
              this.setState({
                items
              });
            }
          };

          render() {
            return (
              <MDBContainer>
                <MDBNav pills color="success" className="nav-justified ">
                  <MDBNavItem>
                    <MDBNavLink
                      link
                      to="#"
                      active={this.state.items["dropdown"] === "1"}
                      onClick={this.togglePills("dropdown", "1")}
                    >
                      Active
                    </MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBDropdown>
                      <MDBDropdownToggle nav caret color="success">
                        Dropdown
                      </MDBDropdownToggle>
                      <MDBDropdownMenu color="success">
                        <MDBDropdownItem>Action</MDBDropdownItem>
                        <MDBDropdownItem>Another Action</MDBDropdownItem>
                        <MDBDropdownItem>Something else here</MDBDropdownItem>
                        <MDBDropdownItem divider />
                        <MDBDropdownItem>Separated link</MDBDropdownItem>
                      </MDBDropdownMenu>
                    </MDBDropdown>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBNavLink
                      link
                      to="#"
                      active={this.state.items["dropdown"] === "2"}
                      onClick={this.togglePills("dropdown", "2")}
                    >
                      Link 1
                    </MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBNavLink
                      link
                      to="#"
                      active={this.state.items["dropdown"] === "3"}
                      onClick={this.togglePills("dropdown", "3")}
                    >
                      Link 2
                    </MDBNavLink>
                  </MDBNavItem>
                </MDBNav>

              </MDBContainer>
            );
          }
        }

        export default PillsDropdown;
        
        
    

Gradient pills MDB Pro component

        
            

        import React, { Component } from "react";
        import { MDBContainer, MDBNav, MDBNavItem, MDBNavLink } from "mdbreact";
        import "./Pills.css"; //Import necessary styles for this example


        class PillsGradient extends Component {
          state = {
            items: {
            gradient: "1",
            }
          }

          togglePills = (type, tab) => e => {
            e.preventDefault();
            if (this.state.items[type] !== tab) {
              let items = { ...this.state.items };
              items[type] = tab;
              this.setState({
                items
              });
            }
          };

          render() {
            return (
              <MDBContainer>
                <MDBNav pills className="nav-justified pills-peach-gradient">
                  <MDBNavItem>
                    <MDBNavLink
                      link
                      to="#"
                      active={this.state.items["gradient"] === "1"}
                      onClick={this.togglePills("gradient", "1")}
                    >
                      Blogger
                    </MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBNavLink
                      link
                      to="#"
                      active={this.state.items["gradient"] === "2"}
                      onClick={this.togglePills("gradient", "2")}
                    >
                      Designer
                    </MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBNavLink
                      link
                      to="#"
                      active={this.state.items["gradient"] === "3"}
                      onClick={this.togglePills("gradient", "3")}
                    >
                      Photographer
                    </MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBNavLink
                      link
                      to="#"
                      active={this.state.items["gradient"] === "4"}
                      onClick={this.togglePills("gradient", "4")}
                    >
                      Model
                    </MDBNavLink>
                  </MDBNavItem>
                </MDBNav>
              </MDBContainer>
            );
          }
        }

        export default PillsGradient;
        
        
    
        
            

          .pills-peach-gradient .nav-item .nav-link.active {
            background: linear-gradient(40deg, #FFD86F, #FC6262);
          }
          .pills-blue-gradient .nav-item .nav-link.active {
            background: linear-gradient(40deg, #45cafc, #303f9f);
          }
          .pills-purple-gradient .nav-item .nav-link.active {
            background: linear-gradient(40deg, #ff6ec4, #7873f5);
          }
          .pills-aqua-gradient .nav-item .nav-link.active {
            background: linear-gradient(40deg, #2096ff, #05ffa3);
          }

        
        
    

Vertical pills MDB Pro component

Downloads

Completely legal

Orders & Invoices

"Hello? Is it me you're looking for?"

Billing Details

Time to pay

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

        class VerticalPills extends Component {
          state = {
            items: {
              vertical: "1"
            }
          }

          togglePills = (type, tab) => e => {
            e.preventDefault();
            if (this.state.items[type] !== tab) {
              let items = { ...this.state.items };
              items[type] = tab;
              this.setState({
                items
              });
            }
          };

          render() {
            return (
              <MDBContainer>
                <MDBRow>
                  <MDBCol md="3">
                    <MDBNav pills color="primary" className="flex-column">
                      <MDBNavItem>
                        <MDBNavLink
                          link
                          to="#"
                          active={this.state.items["vertical"] === "1"}
                          onClick={this.togglePills("vertical", "1")}
                        >
                          Downloads <MDBIcon icon="download" className="ml-2" />
                        </MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink
                          link
                          to="#"
                          active={this.state.items["vertical"] === "2"}
                          onClick={this.togglePills("vertical", "2")}
                        >
                          Orders & invoices
                          <MDBIcon icon="file-alt" className="ml-2" />
                        </MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink
                          link
                          to="#"
                          active={this.state.items["vertical"] === "3"}
                          onClick={this.togglePills("vertical", "3")}
                        >
                          Billing Details
                          <MDBIcon icon="address-card" className="ml-2" />
                        </MDBNavLink>
                      </MDBNavItem>
                    </MDBNav>
                  </MDBCol>
                  <MDBCol md="9">
                    <MDBTabContent activeItem={this.state.items["vertical"]}>
                      <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="primary">
                              pay
                            </MDBBtn>
                          </MDBCardText>
                        </MDBCardBody>
                      </MDBTabPane>
                    </MDBTabContent>
                  </MDBCol>
                </MDBRow>
              </MDBContainer>
            );
          }
        }

        export default VerticalPills;

        
        
    

Rounded pills MDB Pro component

        
            
        import React, { Component } from "react";
        import { 
          MDBContainer, 
          MDBRow, MDBNav, 
          MDBNavItem, 
          MDBNavLink 
        } from "mdbreact";
        import "./Pills.css"; //Import necessary styles for this example

        class PillsRounded extends Component {
          state = {
              items: {
              rounded: "1",
              rounded2: "1",
              roundedGradient: "1",
              roundedGradient2: "1",
              roundedOutline: "1",
              roundedOutline2: "1",
            }
          }

          togglePills = (type, tab) => e => {
            e.preventDefault();
            if (this.state.items[type] !== tab) {
              let items = { ...this.state.items };
              items[type] = tab;
              this.setState({
                items
              });
            }
          };

          render() {
            return (
              <MDBContainer>
                <MDBRow>
                  <MDBNav
                    pills
                    color="deep-purple"
                    className="nav-justified col-md-6 pills-rounded"
                  >
                    <MDBNavItem>
                      <MDBNavLink
                        link
                        to="#"
                        active={this.state.items["rounded"] === "1"}
                        onClick={this.togglePills("rounded", "1")}
                      >
                        Active
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink
                        link
                        to="#"
                        active={this.state.items["rounded"] === "2"}
                        onClick={this.togglePills("rounded", "2")}
                      >
                        Link 1
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink
                        link
                        to="#"
                        active={this.state.items["rounded"] === "3"}
                        onClick={this.togglePills("rounded", "3")}
                      >
                        Link 2
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink
                        link
                        to="#"
                        active={this.state.items["rounded"] === "4"}
                        onClick={this.togglePills("rounded", "4")}
                      >
                        Link 3
                      </MDBNavLink>
                    </MDBNavItem>
                  </MDBNav>

                  <MDBNav
                    pills
                    color="light-purple"
                    className="nav-justified col-md-6 pills-rounded"
                  >
                    <MDBNavItem>
                      <MDBNavLink
                        link
                        to="#"
                        active={this.state.items["rounded2"] === "1"}
                        onClick={this.togglePills("rounded2", "1")}
                      >
                        Active
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink
                        link
                        to="#"
                        active={this.state.items["rounded2"] === "2"}
                        onClick={this.togglePills("rounded2", "2")}
                      >
                        Link 1
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink
                        link
                        to="#"
                        active={this.state.items["rounded2"] === "3"}
                        onClick={this.togglePills("rounded2", "3")}
                      >
                        Link 2
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink
                        link
                        to="#"
                        active={this.state.items["rounded2"] === "4"}
                        onClick={this.togglePills("rounded2", "4")}
                      >
                        Link 3
                      </MDBNavLink>
                    </MDBNavItem>
                  </MDBNav>

                  <MDBNav
                    pills
                    className="nav-justified col-md-6 pills-peach-gradient pills-rounded"
                  >
                    <MDBNavItem>
                      <MDBNavLink
                        link
                        to="#"
                        active={this.state.items["roundedGradient"] === "1"}
                        onClick={this.togglePills("roundedGradient", "1")}
                      >
                        Active
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink
                        link
                        to="#"
                        active={this.state.items["roundedGradient"] === "2"}
                        onClick={this.togglePills("roundedGradient", "2")}
                      >
                        Link 1
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink
                        link
                        to="#"
                        active={this.state.items["roundedGradient"] === "3"}
                        onClick={this.togglePills("roundedGradient", "3")}
                      >
                        Link 2
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink
                        link
                        to="#"
                        active={this.state.items["roundedGradient"] === "4"}
                        onClick={this.togglePills("roundedGradient", "4")}
                      >
                        Link 3
                      </MDBNavLink>
                    </MDBNavItem>
                  </MDBNav>

                  <MDBNav
                    pills
                    className="nav-justified col-md-6 pills-rounded pills-green-gradient"
                  >
                    <MDBNavItem>
                      <MDBNavLink
                        link
                        to="#"
                        active={this.state.items["roundedGradient2"] === "1"}
                        onClick={this.togglePills("roundedGradient2", "1")}
                      >
                        Active
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink
                        link
                        to="#"
                        active={this.state.items["roundedGradient2"] === "2"}
                        onClick={this.togglePills("roundedGradient2", "2")}
                      >
                        Link 1
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink
                        link
                        to="#"
                        active={this.state.items["roundedGradient2"] === "3"}
                        onClick={this.togglePills("roundedGradient2", "3")}
                      >
                        Link 2
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink
                        link
                        to="#"
                        active={this.state.items["roundedGradient2"] === "4"}
                        onClick={this.togglePills("roundedGradient2", "4")}
                      >
                        Link 3
                      </MDBNavLink>
                    </MDBNavItem>
                  </MDBNav>

                  <MDBNav
                    pills
                    className="nav-justified col-md-6 pills-rounded pills-outline-red"
                  >
                    <MDBNavItem>
                      <MDBNavLink
                        link
                        to="#"
                        active={this.state.items["roundedOutline"] === "1"}
                        onClick={this.togglePills("roundedOutline", "1")}
                      >
                        Active
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink
                        link
                        to="#"
                        active={this.state.items["roundedOutline"] === "2"}
                        onClick={this.togglePills("roundedOutline", "2")}
                      >
                        Link 1
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink
                        link
                        to="#"
                        active={this.state.items["roundedOutline"] === "3"}
                        onClick={this.togglePills("roundedOutline", "3")}
                      >
                        Link 2
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink
                        link
                        to="#"
                        active={this.state.items["roundedOutline"] === "4"}
                        onClick={this.togglePills("roundedOutline", "4")}
                      >
                        Link 3
                      </MDBNavLink>
                    </MDBNavItem>
                  </MDBNav>

                  <MDBNav
                    pills
                    className="nav-justified col-md-6 pills-rounded pills-outline-green"
                  >
                    <MDBNavItem>
                      <MDBNavLink
                        link
                        to="#"
                        active={this.state.items["roundedOutline2"] === "1"}
                        onClick={this.togglePills("roundedOutline2", "1")}
                      >
                        Active
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink
                        link
                        to="#"
                        active={this.state.items["roundedOutline2"] === "2"}
                        onClick={this.togglePills("roundedOutline2", "2")}
                      >
                        Link 1
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink
                        link
                        to="#"
                        active={this.state.items["roundedOutline2"] === "3"}
                        onClick={this.togglePills("roundedOutline2", "3")}
                      >
                        Link 2
                      </MDBNavLink>
                    </MDBNavItem>
                    <MDBNavItem>
                      <MDBNavLink
                        link
                        to="#"
                        active={this.state.items["roundedOutline2"] === "4"}
                        onClick={this.togglePills("roundedOutline2", "4")}
                      >
                        Link 3
                      </MDBNavLink>
                    </MDBNavItem>
                  </MDBNav>
                </MDBRow>
              </MDBContainer>
            );
          }
        }

        export default PillsRounded;

        
        
    
        
            
        .pills-rounded .nav-item .nav-link {
          border-radius: 10em;
        }
        .pills-light-purple .nav-item .nav-link.active {
          background-color: #ba68c8;
        }

        .pills-outline-red .nav-item .nav-link {
          border: 2px solid #fff;
          color: #666;
          background-color: transparent;
        }
        .pills-outline-red .nav-item .nav-link:hover {
          border: 2px solid #eee;
        }
        .pills-outline-red .nav-item .nav-link.active {
          border: 2px solid #f44336;
          color: #f44336;
        }
        .pills-outline-red .nav-item .nav-link.active:hover {
          border: 2px solid #f44336;
          color: #f44336;
        }

        .pills-outline-green .nav-item .nav-link {
          border: 2px solid #fff;
          color: #666;
          background-color: transparent;
        }
        .pills-outline-green .nav-item .nav-link:hover {
          border: 2px solid #eee;
        }
        .pills-outline-green .nav-item .nav-link.active {
          border: 2px solid #4caf50;
          color: #4caf50;
        }
        .pills-outline-green .nav-item .nav-link.active:hover {
          border: 2px solid #4caf50;
          color: #4caf50;
        }

        .pills-peach-gradient .nav-item .nav-link.active {
          background: linear-gradient(40deg, #ffd86f, #fc6262);
        }
        .pills-blue-gradient .nav-item .nav-link.active {
          background: linear-gradient(40deg, #45cafc, #303f9f);
        }
        .pills-purple-gradient .nav-item .nav-link.active {
          background: linear-gradient(40deg, #ff6ec4, #7873f5);
        }
        .pills-aqua-gradient .nav-item .nav-link.active {
          background: linear-gradient(40deg, #2096ff, #05ffa3);
        }
        
        
    

Pills With Icon MDB Pro component

        
            
        import React, { Component } from "react";
        import { 
          MDBContainer, 
          MDBNav, 
          MDBNavItem, 
          MDBNavLink, 
          MDBIcon 
        } from "mdbreact";
        import "./Pills.css"; //Import necessary styles for this example

        class PillsWithIcon extends Component {
          state = {
            items: {
            icons: "1",
            iconsRight: "1",
            }
          }

          togglePills = (type, tab) => e => {
            e.preventDefault();
            if (this.state.items[type] !== tab) {
              let items = { ...this.state.items };
              items[type] = tab;
              this.setState({
                items
              });
            }
          };

          render() {
            return (
              <MDBContainer>
                <MDBNav pills color="info" className="nav-justified ">
                  <MDBNavItem>
                    <MDBNavLink
                      link
                      to="#"
                      active={this.state.items["icons"] === "1"}
                      onClick={this.togglePills("icons", "1")}
                    >
                      <MDBIcon fab icon="android" /> USA
                    </MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBNavLink
                      link
                      to="#"
                      active={this.state.items["icons"] === "2"}
                      onClick={this.togglePills("icons", "2")}
                    >
                      <MDBIcon icon="leaf" /> Mexico
                    </MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBNavLink
                      link
                      to="#"
                      active={this.state.items["icons"] === "3"}
                      onClick={this.togglePills("icons", "3")}
                    >
                      <MDBIcon icon="heart" /> Poland
                    </MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBNavLink
                      link
                      to="#"
                      active={this.state.items["icons"] === "4"}
                      onClick={this.togglePills("icons", "4")}
                    >
                      <MDBIcon icon="futbol" /> Brazil
                    </MDBNavLink>
                  </MDBNavItem>
                </MDBNav>
                <MDBNav pills className="nav-justified pills-rounded pills-outline-red">
                  <MDBNavItem>
                    <MDBNavLink
                      link
                      to="#"
                      active={this.state.items["iconsRight"] === "1"}
                      onClick={this.togglePills("iconsRight", "1")}
                    >
                      San Francisco <MDBIcon far icon="grin" />
                    </MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBNavLink
                      link
                      to="#"
                      active={this.state.items["iconsRight"] === "2"}
                      onClick={this.togglePills("iconsRight", "2")}
                    >
                      Tijuana <MDBIcon icon="users" />
                    </MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBNavLink
                      link
                      to="#"
                      active={this.state.items["iconsRight"] === "3"}
                      onClick={this.togglePills("iconsRight", "3")}
                    >
                      Cracow <MDBIcon icon="thumbs-up" />
                    </MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBNavLink
                      link
                      to="#"
                      active={this.state.items["iconsRight"] === "4"}
                      onClick={this.togglePills("iconsRight", "4")}
                    >
                      Rio de Janeiro <MDBIcon icon="coffee" />
                    </MDBNavLink>
                  </MDBNavItem>
                </MDBNav>
              </MDBContainer>
            );
          }
        }

        export default PillsWithIcon;

      
        
    
        
            
        .pills-rounded .nav-item .nav-link {
          border-radius: 10em;
        }
        .pills-outline-red .nav-item .nav-link {
          border: 2px solid #fff;
          color: #666;
          background-color: transparent;
        }
          .pills-outline-red .nav-item .nav-link:hover {
          border: 2px solid #eee;
        }
          .pills-outline-red .nav-item .nav-link.active {
          border: 2px solid #f44336;
          color: #f44336;
        }
          .pills-outline-red .nav-item .nav-link.active:hover {
          border: 2px solid #f44336;
          color: #f44336;
        }

        
        
    

Pills With Content 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.

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

        
            
          import React, { Component } from "react";
          import { 
            MDBTabPane, 
            MDBTabContent, 
            MDBNav, 
            MDBNavItem, 
            MDBNavLink, 
            MDBContainer, 
            MDBRow, 
            MDBCol 
          } from "mdbreact";
          import "./Pills.css"; //Import necessary styles for this example

          class PillsWithContent extends Component {
            state = {
              items: {
              content: "1",
              contentCard: "1",
              }
            }

            togglePills = (type, tab) => e => {
              e.preventDefault();
              if (this.state.items[type] !== tab) {
                let items = { ...this.state.items };
                items[type] = tab;
                this.setState({
                  items
                });
              }
            };

            render() {
              return (
                <MDBContainer>
                  <MDBRow>
                    <MDBCol md="6">
                      <MDBNav
                        pills
                        className="nav-justified pills-rounded pills-purple-gradient"
                      >
                        <MDBNavItem>
                          <MDBNavLink
                            link
                            to="#"
                            active={this.state.items["content"] === "1"}
                            onClick={this.togglePills("content", "1")}
                          >
                            Fashion
                          </MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink
                            link
                            to="#"
                            active={this.state.items["content"] === "2"}
                            onClick={this.togglePills("content", "2")}
                          >
                            Lifestyle
                          </MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink
                            link
                            to="#"
                            active={this.state.items["content"] === "3"}
                            onClick={this.togglePills("content", "3")}
                          >
                            Beauty
                          </MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink
                            link
                            to="#"
                            active={this.state.items["content"] === "4"}
                            onClick={this.togglePills("content", "4")}
                          >
                            Shop
                          </MDBNavLink>
                        </MDBNavItem>
                      </MDBNav>
                      <MDBTabContent activeItem={this.state.items["content"]}>
                        <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>
                            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>
                          <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>
                            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>
                            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>
                          <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>
                    </MDBCol>
                    <MDBCol md="6">
                      <MDBNav pills color="warning" className="nav-justified mb-4">
                        <MDBNavItem>
                          <MDBNavLink
                            link
                            to="#"
                            active={this.state.items["contentCard"] === "1"}
                            onClick={this.togglePills("contentCard", "1")}
                          >
                            Fashion
                          </MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink
                            link
                            to="#"
                            active={this.state.items["contentCard"] === "2"}
                            onClick={this.togglePills("contentCard", "2")}
                          >
                            Lifestyle
                          </MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink
                            link
                            to="#"
                            active={this.state.items["contentCard"] === "3"}
                            onClick={this.togglePills("contentCard", "3")}
                          >
                            Beauty
                          </MDBNavLink>
                        </MDBNavItem>
                      </MDBNav>
                      <MDBTabContent
                        className={"card"}
                        activeItem={this.state.items["contentCard"]}
                      >
                        <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>
                            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>
                          <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>
                            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>
                    </MDBCol>
                  </MDBRow>
                  </MDBContainer>
              );
            }
          }

          export default PillsWithContent;
        
        
    
        
            
          .pills-rounded .nav-item .nav-link {
            border-radius: 10em;
          }
          .pills-purple-gradient .nav-item .nav-link.active {
            background: linear-gradient(40deg, #ff6ec4, #7873f5);
          }
        
        
    

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

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. 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, 
                  MDBCol, 
                  MDBTabPane, 
                  MDBTabContent, 
                  MDBNav, 
                  MDBNavItem, 
                  MDBNavLink 
                } from "mdbreact";
                import "./Pills.css"; //Import necessary styles for this example
      
                class PillsColorAnimations extends Component {
                  state = {
                    items: {
                    animation: "1",
                    animationRO: "1",
                    animationR: "1",
                    }
                  }
        
                  togglePills = (type, tab) => e => {
                    e.preventDefault();
                    if (this.state.items[type] !== tab) {
                      let items = { ...this.state.items };
                      items[type] = tab;
                      this.setState({
                        items
                      });
                    }
                  };
        
                  render() {
                    return (
                      <MDBContainer>
                        <MDBCol xl="8" md="10">
                          <MDBNav pills color="blue-teal" className="nav-justified">
                            <MDBNavItem>
                              <MDBNavLink
                                link
                                to="#"
                                active={this.state.items["animation"] === "1"}
                                onClick={this.togglePills("animation", "1")}
                              >
                                Fashion
                              </MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem>
                              <MDBNavLink
                                link
                                to="#"
                                active={this.state.items["animation"] === "2"}
                                onClick={this.togglePills("animation", "2")}
                              >
                                Lifestyle
                              </MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem>
                              <MDBNavLink
                                link
                                to="#"
                                active={this.state.items["animation"] === "3"}
                                onClick={this.togglePills("animation", "3")}
                              >
                                Beauty
                              </MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem>
                              <MDBNavLink
                                link
                                to="#"
                                active={this.state.items["animation"] === "4"}
                                onClick={this.togglePills("animation", "4")}
                              >
                                Shop
                              </MDBNavLink>
                            </MDBNavItem>
                          </MDBNav>
                          <MDBNav
                            pills
                            className="nav-justified pills-rounded pills-outline-purple-anm"
                          >
                            <MDBNavItem>
                              <MDBNavLink
                                link
                                to="#"
                                active={this.state.items["animationRO"] === "1"}
                                onClick={this.togglePills("animationRO", "1")}
                              >
                                Madrid
                              </MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem>
                              <MDBNavLink
                                link
                                to="#"
                                active={this.state.items["animationRO"] === "2"}
                                onClick={this.togglePills("animationRO", "2")}
                              >
                                Bari
                              </MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem>
                              <MDBNavLink
                                link
                                to="#"
                                active={this.state.items["animationRO"] === "3"}
                                onClick={this.togglePills("animationRO", "3")}
                              >
                                Warsaw
                              </MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem>
                              <MDBNavLink
                                link
                                to="#"
                                active={this.state.items["animationRO"] === "4"}
                                onClick={this.togglePills("animationRO", "4")}
                              >
                                Paris
                              </MDBNavLink>
                            </MDBNavItem>
                          </MDBNav>
                          <MDBNav
                            pills
                            className="nav-justified pills-rounded pills-orange-anm"
                          >
                            <MDBNavItem>
                              <MDBNavLink
                                link
                                to="#"
                                active={this.state.items["animationR"] === "1"}
                                onClick={this.togglePills("animationR", "1")}
                              >
                                Features
                              </MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem>
                              <MDBNavLink
                                link
                                to="#"
                                active={this.state.items["animationR"] === "2"}
                                onClick={this.togglePills("animationR", "2")}
                              >
                                Pricing
                              </MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem>
                              <MDBNavLink
                                link
                                to="#"
                                active={this.state.items["animationR"] === "3"}
                                onClick={this.togglePills("animationR", "3")}
                              >
                                Gadgets
                              </MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem>
                              <MDBNavLink
                                link
                                to="#"
                                active={this.state.items["animationR"] === "4"}
                                onClick={this.togglePills("animationR", "4")}
                              >
                                Technology
                              </MDBNavLink>
                            </MDBNavItem>
                          </MDBNav>
                          <MDBTabContent activeItem={this.state.items["animationR"]}>
                            <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>
                                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>
                              <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>
                                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>
                                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>
                              <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>
                        </MDBCol>
                        </MDBContainer>
                    );
                  }
                }
      
                export default PillsColorAnimations;
              
        
    
        
            
                .pills-blue-teal .nav-item .nav-link.active {
                  background-color: #4fc3f7;
                  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
                  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
                  animation-name: example;
                  animation-duration: 4s;
                }
                /* Safari 4.0 - 8.0 */
                @-webkit-keyframes example {
                  from {background-color: #4fc3f7;}
                  to {background-color: #009688;}
                  }
      
                /* Standard syntax */
                @keyframes example {
                  from {background-color: #4fc3f7;}
                  to {background-color: #009688;}
                }
      
                .pills-outline-purple-anm .nav-item .nav-link.active {
                  border: 2px solid #9c27b0;
                  color: #9c27b0;
                  background-color: transparent;
                  -webkit-animation-name: outline; /* Safari 4.0 - 8.0 */
                  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
                  animation-name: outline;
                  animation-duration: 4s;
                }
                /* Safari 4.0 - 8.0 */
                @-webkit-keyframes outline {
                  from {border: 2px solid #9c27b0; color: #9c27b0;}
                  to {border: 2px solid #f48fb1; color: #f48fb1;}
                }
      
                /* Standard syntax */
                @keyframes outline {
                  from {border: 2px solid #9c27b0; color: #9c27b0;}
                  to {border: 2px solid #f48fb1; color: #f48fb1;}
                }
      
                  .pills-orange-anm .nav-item .nav-link.active {
                  background-color: #ffa000 ;
                  -webkit-animation-name: orange; /* Safari 4.0 - 8.0 */
                  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
                  animation-name: orange;
                  animation-duration: 4s;
                }
                /* Safari 4.0 - 8.0 */
                  @-webkit-keyframes orange {
                from {background-color: #ffa000 ;}
                  to {background-color: #f44336;}
                }
      
                /* Standard syntax */
                @keyframes orange {
                  from {background-color: #ffa000 ;}
                  to {background-color: #f44336;}
                }
      
                .pills-rounded .nav-item .nav-link {
                  border-radius: 10em;
                }
              
        
    

Pills within modal MDB Pro component

        
            
          import React, { Component } from "react";
          import {
            MDBContainer,
            MDBRow,
            MDBCol,
            MDBBtn,
            MDBIcon,
            MDBModal,
            MDBModalBody,
            MDBModalFooter,
            MDBInput,
            MDBTabPane,
            MDBTabContent,
            MDBNav,
            MDBNavItem,
            MDBNavLink,
          } from "mdbreact";

          class PillsInModal extends Component {
            state = {
              modal1: false,
              items: {
                modal: "1",
              }
            }

            togglePills = (type, tab) => e => {
              e.preventDefault();
              if (this.state.items[type] !== tab) {
                let items = { ...this.state.items };
                items[type] = tab;
                this.setState({
                  items
                });
              }
            };

            toggle = nr => () => {
              let modalNumber = "modal" + nr;
              this.setState({
                [modalNumber]: !this.state[modalNumber]
              });
            };

            render() {
              return (
                <MDBContainer>
                  <MDBBtn rounded onClick={this.toggle(1)}>
                    Launch Modal LogIn/Register
                    <MDBIcon icon="eye" className="ml-1" />
                  </MDBBtn>
                  <MDBModal
                    isOpen={this.state.modal1}
                    toggle={this.toggle(1)}
                    centered
                  >
                    <MDBModalBody>
                      <MDBNav pills color="primary" className="nav-justified pt-2">
                        <MDBNavItem>
                          <MDBNavLink
                            link
                            to="#"
                            active={this.state.items["modal"] === "1"}
                            onClick={this.togglePills("modal", "1")}
                          >
                            <MDBIcon icon="user" className="mr-1" /> Login
                          </MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink
                            link
                            to="#"
                            active={this.state.items["modal"] === "2"}
                            onClick={this.togglePills("modal", "2")}
                          >
                            <MDBIcon icon="user-plus" className="mr-1" /> Register
                          </MDBNavLink>
                        </MDBNavItem>
                      </MDBNav>
                      <MDBTabContent activeItem={this.state.items['modal']}>
                        <MDBTabPane tabId="1">
                          <form className=" mx-3 grey-text">
                            <MDBInput
                              label="Your email"
                              icon="envelope"
                              group
                              type="email"
                              validate
                              error="wrong"
                              success="right"
                            />
                            <MDBInput
                              label="Your password"
                              icon="lock"
                              group
                              type="password"
                              validate
                            />
                            <MDBCol size="12" className="text-center">
                              <MDBBtn color="primary">
                                LOG IN
                                <MDBIcon icon="sign-in-alt" className="ml-1" />
                              </MDBBtn>
                            </MDBCol>
                          </form>
                        </MDBTabPane>
                        <MDBTabPane tabId="2">
                          <form className="mx-3 grey-text">
                            <MDBInput
                              label="Your name"
                              icon="user"
                              group
                              type="text"
                              validate
                              error="wrong"
                              success="right"
                            />
                            <MDBInput
                              label="Your email"
                              icon="envelope"
                              group
                              type="email"
                              validate
                              error="wrong"
                              success="right"
                            />
                            <MDBInput
                              label="Your password"
                              icon="lock"
                              group
                              type="password"
                              validate
                            />
                            <MDBCol size="12" className="text-center">
                              <MDBBtn color="primary">
                                SIGN IN
                                <MDBIcon icon="sign-in-alt" className="ml-1" />
                              </MDBBtn>
                            </MDBCol>
                          </form>
                        </MDBTabPane>
                      </MDBTabContent>
                    </MDBModalBody>
                    <MDBModalFooter className="justify-content-center">
                      <MDBRow className="w-100 justify-content-start">
                        <MDBCol size="8">
                          <div id="options" className="text-right float-left">
                            <MDBTabContent
                              className="pt-1 px-0 pb-0"
                              activeItem={this.state.items["modal"]}
                            >
                              <MDBTabPane tabId="1">
                                <p className="font-small">
                                  Not a member?
                                  <a
                                    className="blue-text ml-1"
                                    onClick={this.togglePills("modal", "2")}
                                  >
                                    Sign Up
                                  </a>
                                </p>
                                <p className="font-small">
                                  Forgot <a className="blue-text ml-1">password?</a>
                                </p>
                              </MDBTabPane>
                              <MDBTabPane tabId="2">
                                <p className="font-small">
                                  Already have an account?
                                  <a
                                    className="blue-text ml-1"
                                    onClick={this.togglePills("modal", "2")}
                                  >
                                    LogIn
                                  </a>
                                </p>
                                <p className="font-small">
                                  Forgot <a className="blue-text ml-1">password?</a>
                                </p>
                              </MDBTabPane>
                            </MDBTabContent>
                          </div>
                        </MDBCol>
                        <MDBCol size="4" className="float-right">
                          <MDBBtn outline color="primary" onClick={this.toggle(1)}>
                            CLOSE
                          </MDBBtn>
                        </MDBCol>
                      </MDBRow>
                    </MDBModalFooter>
                  </MDBModal>
                </MDBContainer>
              );
            }
          }

          export default PillsInModal;

        
        
    

React Pills - API

In this section you will find advanced information about the Pills 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

Pill are variation of Tabs, 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" />