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 open={basicActive === 'tab1'}>Tab 1 content</MDBTabsPane>
                  <MDBTabsPane open={basicActive === 'tab2'}>Tab 2 content</MDBTabsPane>
                  <MDBTabsPane open={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 open={fillActive === 'tab1'}>Tab 1 content</MDBTabsPane>
                    <MDBTabsPane open={fillActive === 'tab2'}>Tab 2 content</MDBTabsPane>
                    <MDBTabsPane open={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 open={justifyActive === 'tab1'}>Tab 1 content</MDBTabsPane>
                    <MDBTabsPane open={justifyActive === 'tab2'}>Tab 2 content</MDBTabsPane>
                    <MDBTabsPane open={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 Profile Messages
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 open={verticalActive === 'tab1'}>Home content</MDBTabsPane>
                      <MDBTabsPane open={verticalActive === 'tab2'}>Profile content</MDBTabsPane>
                      <MDBTabsPane open={verticalActive === 'tab3'}>Messages content</MDBTabsPane>
                    </MDBTabsContent>
                  </MDBCol>
                </MDBRow>
              </>
            );
          }

Tabs with icons

Use one of 1541 icons and add it to the tabs. See the icon docs to explore all the available icons.

Tab 1 content
Tab 2 content
Tab 3 content 
        
            
              import React, { useState } from 'react';
              import {
                MDBIcons,   
                MDBTabs,
                MDBTabsItem,
                MDBTabsLink,
                MDBTabsContent,
                MDBTabsPane
              } from 'mdb-react-ui-kit';
      
              export default function App() {
                const [iconsActive, setIconsActive] = useState('tab1');

                const handleIconsClick = (value: string) => {
                  if (value === iconsActive) {
                    return;
                  }
              
                  setIconsActive(value);
                };

                return (
                  <>
                    <MDBTabs className='mb-3'>
                      <MDBTabsItem>
                        <MDBTabsLink onClick={() => handleIconsClick('tab1')} active={iconsActive === 'tab1'}>
                          <MDBIcon fas icon='chart-pie' className='me-2' /> Sales
                        </MDBTabsLink>
                      </MDBTabsItem>
                      <MDBTabsItem>
                        <MDBTabsLink onClick={() => handleIconsClick('tab2')} active={iconsActive === 'tab2'}>
                          <MDBIcon fas icon='chart-line' className='me-2' /> Subscriptions
                        </MDBTabsLink>
                      </MDBTabsItem>
                      <MDBTabsItem>
                        <MDBTabsLink onClick={() => handleIconsClick('tab3')} active={iconsActive === 'tab3'}>
                          <MDBIcon fas icon='cogs' className='me-2' /> Settings
                        </MDBTabsLink>
                      </MDBTabsItem>
                    </MDBTabs>
        
                    <MDBTabsContent>
                      <MDBTabsPane open={iconsActive === 'tab1'}>Tab 1 content</MDBTabsPane>
                      <MDBTabsPane open={iconsActive === 'tab2'}>Tab 2 content</MDBTabsPane>
                      <MDBTabsPane open={iconsActive === 'tab3'}>Tab 3 content</MDBTabsPane>
                    </MDBTabsContent>
                  </>
                );
              }

Tabs - API

Import

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

Properties

MDBTabs

Name Type Default Description Example
className string Adds a custom class to the MDBTabs <MDBTabs className="class">...</MDBTabs>
fill boolean false Fills the available space in MDBTabs items <MDBTabs fill>...</MDBTabs>
justify boolean false Sets equal width of the MDBTabs items <MDBTabs justify>...</MDBTabs>
pills boolean false Necessary to change the MDBTabs into pills <MDBTabs pills>...</MDBTabs>
ref React.Ref<any> A reference to the MDBTabs component <MDBTabs ref={someRef}>...</MDBTabs>

MDBTabsContent

Name Type Default Description Example
className string '' Adds a custom class to MDBTabsContent <MDBCardHeader className="class" />
ref React.Ref<any> '' A reference to the MDBTabsContent component <MDBCardHeader ref={someRef} />
tag React.ComponentProps<any> 'div' Defines tag of the MDBTabsContent element <MDBTabsContent tag="section" />

MDBTabsItem

Name Type Default Description Example
className string '' Adds a custom class to MDBTabsItem <MDBTabsItem className="class" />
ref React.Ref<any> A reference to the MDBTabsItem component <MDBTabsItem ref={someRef} />
tag React.ComponentProps<any> 'li' Defines tag of the MDBTabsItem element <MDBTabsItem tag="a" />

MDBTabsPane

Name Type Default Description Example
className string '' Adds a custom class to MDBTabsPane <MDBTabsPane className="class" />
ref React.Ref<any> A reference to the MDBTabsPane component <MDBTabsPane ref={someRef} />
open boolean '' Defines if MDBTabsPanes content is shown <MDBTabsPane open />
tag React.ComponentProps<any> 'div' Defines tag of the MDBTabsPane element <MDBTabsPane tag="section" />

Events

Name Type Description
onClose () => any Fires when the TabsPane demands to be closed.
onOpen () => any Fires when the TabsPane demands to be opened.

CSS variables

As part of MDB’s evolving CSS variables approach, tabs now use local CSS variables for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

Tabs CSS variables are in different classes which belong to this component. To make it easier to use them, you can find below all of the used CSS variables.

        
            
        // .nav
        --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

        // .nav-tabs
        --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
        --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
        --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
        --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
        --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
        
        // .nav-tabs
        // .nav-link
        --#{$prefix}nav-tabs-link-font-weight: #{$nav-tabs-link-font-weight};
        --#{$prefix}nav-tabs-link-font-size: #{$nav-tabs-link-font-size};
        --#{$prefix}nav-tabs-link-color: #{$nav-tabs-link-color};
        --#{$prefix}nav-tabs-link-padding-top: #{$nav-tabs-link-padding-top};
        --#{$prefix}nav-tabs-link-padding-bottom: #{$nav-tabs-link-padding-bottom};
        --#{$prefix}nav-tabs-link-padding-x: #{$nav-tabs-link-padding-x};
        --#{$prefix}nav-tabs-link-hover-bgc: #{$nav-tabs-link-hover-bgc};
        --#{$prefix}nav-tabs-link-border-bottom-width: #{$nav-tabs-link-border-bottom-width};
        --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
        --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

SCSS variables

        
            
        $nav-link-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
          border-color 0.15s ease-in-out;
        $nav-link-disabled-color: $gray-600;
        
        $nav-tabs-border-color: $gray-300;
        $nav-tabs-border-width: $border-width;
        $nav-tabs-border-radius: $border-radius;
        $nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color;
        $nav-tabs-link-active-color: $gray-700;
        $nav-tabs-link-active-bg: $body-bg;
        $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

        $nav-tabs-link-border-bottom-width: 2px;
        $nav-tabs-link-font-weight: 500;
        $nav-tabs-link-font-size: 12px;
        $nav-tabs-link-padding-top: 17px;
        $nav-tabs-link-padding-bottom: 16px;
        $nav-tabs-link-padding-x: 29px;
        $nav-tabs-link-hover-background-color: hsl(0, 0%, 96%);
        $nav-tabs-link-active-color: $primary;
        $nav-tabs-link-active-border-color: $primary;

        $nav-tabs-link-color: rgba(0, 0, 0, 0.55);
        $nav-tabs-link-hover-bgc: #f7f7f7;