Tabs

React Bootstrap 5 Tabs component

Tabs are quasi-navigation components which can highly improve website clarity and increase user experience.

Note: Read the API tab to find all available options and advanced customization


Basic example

Basic tabs are divided into 2 main sections - Tabs navs (containing nav-items) and Tabs content (containing tab-panes).

Use useState to connect tabs navs with tabs content.

Tab 1 content
Tab 2 content
Tab 3 content

          import React, { useState } from 'react';
          import {   
            MDBTabs,
            MDBTabsItem,
            MDBTabsLink,
            MDBTabsContent,
            MDBTabsPane
          } from 'mdb-react-ui-kit';
  
          export default function App() {
            const [basicActive, setBasicActive] = useState('tab1');

            const handleBasicClick = (value: string) => {
              if (value === basicActive) {
                return;
              }
          
              setBasicActive(value);
            };

            return (
              <>
                <MDBTabs className='mb-3'>
                  <MDBTabsItem>
                    <MDBTabsLink onClick={() => handleBasicClick('tab1')} active={basicActive === 'tab1'}>
                      Tab 1
                    </MDBTabsLink>
                  </MDBTabsItem>
                  <MDBTabsItem>
                    <MDBTabsLink onClick={() => handleBasicClick('tab2')} active={basicActive === 'tab2'}>
                      Tab 2
                    </MDBTabsLink>
                  </MDBTabsItem>
                  <MDBTabsItem>
                    <MDBTabsLink onClick={() => handleBasicClick('tab3')} active={basicActive === 'tab3'}>
                      Tab 3
                    </MDBTabsLink>
                  </MDBTabsItem>
                </MDBTabs>
    
                <MDBTabsContent>
                  <MDBTabsPane show={basicActive === 'tab1'}>Tab 1 content</MDBTabsPane>
                  <MDBTabsPane show={basicActive === 'tab2'}>Tab 2 content</MDBTabsPane>
                  <MDBTabsPane show={basicActive === 'tab3'}>Tab 3 content</MDBTabsPane>
                </MDBTabsContent>
              </>
            );
          }
        

Fill and justify

Force your .nav's contents to extend the full available width one of two modifier properties.

Fill

To proportionately fill all available space with your MDBTabsItems, use fill property. Notice that all horizontal space is occupied, but not every nav item has the same width.

Tab 1 content
Tab 2 content
Tab 3 content

            import React, { useState } from 'react';
            import {   
              MDBTabs,
              MDBTabsItem,
              MDBTabsLink,
              MDBTabsContent,
              MDBTabsPane
            } from 'mdb-react-ui-kit';
    
            export default function App() {
              const [fillActive, setFillActive] = useState('tab1');

              const handleFillClick = (value: string) => {
                if (value === fillActive) {
                  return;
                }
            
                setFillActive(value);
              };

              return (
                <>
                  <MDBTabs fill className='mb-3'>
                    <MDBTabsItem>
                      <MDBTabsLink onClick={() => handleFillClick('tab1')} active={fillActive === 'tab1'}>
                        Link
                      </MDBTabsLink>
                    </MDBTabsItem>
                    <MDBTabsItem>
                      <MDBTabsLink onClick={() => handleFillClick('tab2')} active={fillActive === 'tab2'}>
                        Very very very very long link
                      </MDBTabsLink>
                    </MDBTabsItem>
                    <MDBTabsItem>
                      <MDBTabsLink onClick={() => handleFillClick('tab3')} active={fillActive === 'tab3'}>
                        Another link
                      </MDBTabsLink>
                    </MDBTabsItem>
                  </MDBTabs>
    
                  <MDBTabsContent>
                    <MDBTabsPane show={fillActive === 'tab1'}>Tab 1 content</MDBTabsPane>
                    <MDBTabsPane show={fillActive === 'tab2'}>Tab 2 content</MDBTabsPane>
                    <MDBTabsPane show={fillActive === 'tab3'}>Tab 3 content</MDBTabsPane>
                  </MDBTabsContent>
                </>
              );
            }
          

Justify

For equal-width elements, use justify property. All horizontal space will be occupied by nav links, but unlike the fill property above, every nav item will be the same width.

Tab 1 content
Tab 2 content
Tab 3 content

            import React, { useState } from 'react';
            import {   
              MDBTabs,
              MDBTabsItem,
              MDBTabsLink,
              MDBTabsContent,
              MDBTabsPane
            } from 'mdb-react-ui-kit';
    
            export default function App() {
              const [justifyActive, setJustifyActive] = useState('tab1');

              const handleJustifyClick = (value: string) => {
                if (value === justifyActive) {
                  return;
                }
            
                setJustifyActive(value);
              };

              return (
                <>
                  <MDBTabs justify className='mb-3'>
                    <MDBTabsItem>
                      <MDBTabsLink onClick={() => handleJustifyClick('tab1')} active={justifyActive === 'tab1'}>
                        Link
                      </MDBTabsLink>
                    </MDBTabsItem>
                    <MDBTabsItem>
                      <MDBTabsLink onClick={() => handleJustifyClick('tab2')} active={justifyActive === 'tab2'}>
                        Very very very very long link
                      </MDBTabsLink>
                    </MDBTabsItem>
                    <MDBTabsItem>
                      <MDBTabsLink onClick={() => handleJustifyClick('tab3')} active={justifyActive === 'tab3'}>
                        Another link
                      </MDBTabsLink>
                    </MDBTabsItem>
                  </MDBTabs>
    
                  <MDBTabsContent>
                    <MDBTabsPane show={justifyActive === 'tab1'}>Tab 1 content</MDBTabsPane>
                    <MDBTabsPane show={justifyActive === 'tab2'}>Tab 2 content</MDBTabsPane>
                    <MDBTabsPane show={justifyActive === 'tab3'}>Tab 3 content</MDBTabsPane>
                  </MDBTabsContent>
                </>
              );
            }
          

Vertical

Stack your navigation by changing the flex item direction with the .flex-column utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., .flex-sm-column).

For proper layout, you may also need to use grid to adjust navs and content.

Home content
Profile content
Messages content

          import React, { useState } from 'react';
          import {   
            MDBTabs,
            MDBTabsItem,
            MDBTabsLink,
            MDBTabsContent,
            MDBTabsPane,
            MDBRow,
            MDBCol
          } from 'mdb-react-ui-kit';
  
          export default function App() {
            const [verticalActive, setVerticalActive] = useState('tab1');

            const handleVerticalClick = (value: string) => {
              if (value === verticalActive) {
                return;
              }
          
              setVerticalActive(value);
            };

            return (
              <>
                <MDBRow>
                  <MDBCol size='3'>
                    <MDBTabs className='flex-column text-center'>
                      <MDBTabsItem>
                        <MDBTabsLink onClick={() => handleVerticalClick('tab1')} active={verticalActive === 'tab1'}>
                          Home
                        </MDBTabsLink>
                      </MDBTabsItem>
                      <MDBTabsItem>
                        <MDBTabsLink onClick={() => handleVerticalClick('tab2')} active={verticalActive === 'tab2'}>
                          Profile
                        </MDBTabsLink>
                      </MDBTabsItem>
                      <MDBTabsItem>
                        <MDBTabsLink onClick={() => handleVerticalClick('tab3')} active={verticalActive === 'tab3'}>
                          Messages
                        </MDBTabsLink>
                      </MDBTabsItem>
                    </MDBTabs>
                  </MDBCol>
                  <MDBCol size='9'>
                    <MDBTabsContent>
                      <MDBTabsPane show={verticalActive === 'tab1'}>Home content</MDBTabsPane>
                      <MDBTabsPane show={verticalActive === 'tab2'}>Profile content</MDBTabsPane>
                      <MDBTabsPane show={verticalActive === 'tab3'}>Messages content</MDBTabsPane>
                    </MDBTabsContent>
                  </MDBCol>
                </MDBRow>
              </>
            );
          }
        

Tabs - API


Import


        import {
          MDBTabs,
          MDBTabsItem,
          MDBTabsLink,
          MDBTabsContent,
          MDBTabsPane
        } from 'mdb-react-ui-kit';
      

Properties

MDBTabs

Name Type Default Description Example
className String '' Add custom class to MDBTabs <MDBTabs className="class">...</MDBTabs>
justify Boolean '' Sets equal width of the MDBTabs items <MDBTabs justify>...</MDBTabs>
fill Boolean '' Fills the available space in MDBTabs items <MDBTabs fill>...</MDBTabs>
pills Boolean '' Changes the MDBTabs into pills <MDBTabs pills>...</MDBTabs>

MDBTabsContent

Name Type Default Description Example
tag String 'div' Defines tag of the MDBTabsContent element <MDBTabsContent tag="section" />
className String '' Add custom class to MDBTabsContent <MDBCardHeader className="class" />

MDBTabsItem

Name Type Default Description Example
className String '' Add custom class to MDBTabsItem <MDBTabsItem className="class" />

MDBTabsPane

Name Type Default Description Example
tag String 'div' Defines tag of the MDBTabsPane element <MDBTabsPane tag="section" />
className String '' Add custom class to MDBTabsPane <MDBTabsPane className="class" />
show Boolean '' Defines MDBTabsPanes content is shown <MDBTabsPane show />