Rate this docs

React Bootstrap Pills MDB Pro component

React Pills - Bootstrap 4 & Material Design

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:


Material pills

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

        class TabsPage extends React.Component {

        state = {
          activeItemPills: "1",
        }


        togglePills = (tab) => {
          if (this.state.activePills !== tab) {
            this.setState({
              activeItemPills: tab
            });
          }
        }

        render() {
          return (
            <MDBContainer>
              <MDBNav pills color="secondary">
                <MDBNavItem>
                  <MDBNavLink to="#" className={classnames({ active: this.state.activeItemPills==="1" })} onClick={()=> {
                    this.togglePills("1");
                    }}
                    >
                    Active
                  </MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#" className={classnames({ active: this.state.activeItemPills==="2" })} onClick={()=> {
                    this.togglePills("2");
                    }}
                    >
                    Link
                  </MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#" className={classnames({ active: this.state.activeItemPills==="3" })} onClick={()=> {
                    this.togglePills("3");
                    }}
                    >
                    Link
                  </MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#" className={classnames({ active: this.state.activeItemPills==="4" })} onClick={()=> {
                    this.togglePills("4");
                    }}
                    >
                    Help
                  </MDBNavLink>
                </MDBNavItem>
              </MDBNav>
              <MDBTabContent activeItem={this.state.activeItemPills}>
                <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 TabsPage;
      

Pills justified


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

        class TabsPage extends React.Component {

        state = {
          activeItemPills: "1",
        }


        togglePills = (tab) => {
          if (this.state.activePills !== tab) {
            this.setState({
              activeItemPills: tab
            });
          }
        }

        render() {
          return (
            <MDBContainer>
              <MDBNav pills color="secondary" className="nav-justified ">
                <MDBNavItem>
                  <MDBNavLink to="#" className={classnames({ active: this.state.activeItemPills==="1" })} onClick={()=> {
                    this.togglePills("1");
                    }}
                    >
                    Active
                  </MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#" className={classnames({ active: this.state.activeItemPills==="2" })} onClick={()=> {
                    this.togglePills("2");
                    }}
                    >
                    Link
                  </MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#" className={classnames({ active: this.state.activeItemPills==="3" })} onClick={()=> {
                    this.togglePills("3");
                    }}
                    >
                    Link
                  </MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#" className={classnames({ active: this.state.activeItemPills==="4" })} onClick={()=> {
                    this.togglePills("4");
                    }}
                    >
                    Help
                  </MDBNavLink>
                </MDBNavItem>
              </MDBNav>
              <MDBTabContent activeItem={this.state.activeItemPills}>
                <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 TabsPage;
      

Vertical pills

Downloads

Completely legal

Orders & Invoices

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

Billing Details

Time to pay


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

        class TabsPage extends React.Component {

        state = {
          activeItemVerticalPills: "1",
        }

        toggleVerticalPills = (tab) => {
          if (this.state.activeItem3 !== tab) {
            this.setState({
              activeItemVerticalPills: tab
            });
          }
        }

        render() {
            return (
              <MDBContainer>
                <MDBRow>
                  <MDBCol md="3">
                    <MDBNav pills color="primary" className="flex-column">
                      <MDBNavItem>
                        <MDBNavLink to="#" className={classnames({ active: this.state.activeItemVerticalPills==="1" })} onClick={()=>
                          {
                          this.toggleVerticalPills("1");
                          }}
                          >
                          Downloads
                          <MDBIcon icon="download" className="ml-2" />
                        </MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#" className={classnames({ active: this.state.activeItemVerticalPills==="2" })} onClick={()=>
                          {
                          this.toggleVerticalPills("2");
                          }}
                          >
                          Orders & invoices
                          <MDBIcon icon="file-text" className="ml-2" />
                        </MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#" className={classnames({ active: this.state.activeItemVerticalPills==="3" })} onClick={()=>
                          {
                          this.toggleVerticalPills("3");
                          }}
                          >
                          Billing Details
                          <MDBIcon icon="address-card" className="ml-2" />
                        </MDBNavLink>
                      </MDBNavItem>
                    </MDBNav>
                  </MDBCol>
                  <MDBCol md="9">
                    <MDBTabContent activeItem={this.state.activeItemVerticalPills}>
                      <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 TabsPage;

      

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