Tabs

Vue 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 MDBTabItems) and Tabs content (containing MDBTabPanes).

Use tabId property to connect tab navs with tabs content.

In the example below Tab 1 uses tabId="ex1-1" in the first MDBTabitem element to connect it with the first MDBTabPane which has also tabId="ex1-1".

MDBTabItem has dynamically added id of tab-${tabId} and MDBTabPane is equal to tabId property. Thanks to that proper aria attributes are dynamically added inside those components.

Tab 1 content
Tab 2 content
Tab 3 content 
        
            
            <template>
              <MDBTabs v-model="activeTabId1">
                <!-- Tabs navs -->
                <MDBTabNav tabsClasses="mb-3">
                  <MDBTabItem tabId="ex1-1" href="ex1-1">Tab #1</MDBTabItem>
                  <MDBTabItem tabId="ex1-2" href="ex1-2">Tab #2</MDBTabItem>
                  <MDBTabItem tabId="ex1-3" href="ex1-3">Tab #3</MDBTabItem>
                </MDBTabNav>
                <!-- Tabs navs -->
                <!-- Tabs content -->
                <MDBTabContent>
                  <MDBTabPane tabId="ex1-1">Content #1</MDBTabPane>
                  <MDBTabPane tabId="ex1-2">Content #2</MDBTabPane>
                  <MDBTabPane tabId="ex1-3">Content #3</MDBTabPane>
                </MDBTabContent>
                <!-- Tabs content -->
              </MDBTabs>
            </template>
          
        
    
        
            
            <script>
              import {
                MDBTabs,
                MDBTabNav,
                MDBTabContent,
                MDBTabItem,
                MDBTabPane,
              } from 'mdb-vue-ui-kit';
              import { ref } from 'vue';

              export default {
                components: {
                  MDBTabs,
                  MDBTabNav,
                  MDBTabContent,
                  MDBTabItem,
                  MDBTabPane,
                },
                setup() {
                  const activeTabId1 = ref('ex1-1');

                  return {
                    activeTabId1,
                  };
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import {
                MDBTabs,
                MDBTabNav,
                MDBTabContent,
                MDBTabItem,
                MDBTabPane,
              } from 'mdb-vue-ui-kit';
              import { ref } from 'vue';

              const activeTabId1 = ref('ex1-1');
            </script>

Fill and justify

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

Fill

To proportionately fill all available space with your MDBTabItems, use fill. 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 
        
            
              <template>
                <MDBTabs v-model="activeTabId2">
                  <!-- Tabs navs -->
                  <MDBTabNav fill tabsClasses="mb-3">
                    <MDBTabItem tabId="ex2-1" href="ex2-1">Link</MDBTabItem>
                    <MDBTabItem tabId="ex2-2" href="ex2-2">Very very very very long link</MDBTabItem>
                    <MDBTabItem tabId="ex2-3" href="ex2-3">Another link</MDBTabItem>
                  </MDBTabNav>
                  <!-- Tabs navs -->
                  <!-- Tabs content -->
                  <MDBTabContent>
                    <MDBTabPane tabId="ex2-1">Tab 1 content</MDBTabPane>
                    <MDBTabPane tabId="ex2-2">Tab 2 content</MDBTabPane>
                    <MDBTabPane tabId="ex2-3">Tab 3 content</MDBTabPane>
                  </MDBTabContent>
                  <!-- Tabs content -->
                </MDBTabs>
              </template>
            
        
    
        
            
              <script>
                import {
                  MDBTabs,
                  MDBTabNav,
                  MDBTabContent,
                  MDBTabItem,
                  MDBTabPane,
                } from 'mdb-vue-ui-kit';
                import { ref } from 'vue';

                export default {
                  components: {
                    MDBTabs,
                    MDBTabNav,
                    MDBTabContent,
                    MDBTabItem,
                    MDBTabPane,
                  },
                  setup() {
                    const activeTabId2 = ref('ex2-1');

                    return {
                      activeTabId2,
                    };
                  },
                };
              </script>
            
        
    
        
            
              <script setup lang="ts">
                import {
                  MDBTabs,
                  MDBTabNav,
                  MDBTabContent,
                  MDBTabItem,
                  MDBTabPane,
                } from 'mdb-vue-ui-kit';
                import { ref } from 'vue';

                const activeTabId2 = ref('ex2-1');
              </script>

Justify

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

Tab 1 content
Tab 2 content
Tab 3 content 
        
            
              <template>
                <MDBTabs v-model="activeTabId3">
                  <!-- Tabs navs -->
                  <MDBTabNav justify tabsClasses="mb-3">
                    <MDBTabItem tabId="ex3-1" href="ex3-1">Link</MDBTabItem>
                    <MDBTabItem tabId="ex3-2" href="ex3-2">Very very very very long link</MDBTabItem>
                    <MDBTabItem tabId="ex3-3" href="ex3-3">Another link</MDBTabItem>
                  </MDBTabNav>
                  <!-- Tabs navs -->
                  <!-- Tabs content -->
                  <MDBTabContent>
                    <MDBTabPane tabId="ex3-1">Tab 1 content</MDBTabPane>
                    <MDBTabPane tabId="ex3-2">Tab 2 content</MDBTabPane>
                    <MDBTabPane tabId="ex3-3">Tab 3 content</MDBTabPane>
                  </MDBTabContent>
                  <!-- Tabs content -->
                </MDBTabs>
              </template>
            
        
    
        
            
              <script>
                import {
                  MDBTabs,
                  MDBTabNav,
                  MDBTabContent,
                  MDBTabItem,
                  MDBTabPane,
                } from 'mdb-vue-ui-kit';
                import { ref } from 'vue';

                export default {
                  components: {
                    MDBTabs,
                    MDBTabNav,
                    MDBTabContent,
                    MDBTabItem,
                    MDBTabPane,
                  },
                  setup() {
                    const activeTabId3 = ref('ex3-1');

                    return {
                      activeTabId3,
                    };
                  },
                };
              </script>
            
        
    
        
            
              <script setup lang="ts">
                import {
                  MDBTabs,
                  MDBTabNav,
                  MDBTabContent,
                  MDBTabItem,
                  MDBTabPane,
                } from 'mdb-vue-ui-kit';
                import { ref } from 'vue';

                const activeTabId3 = ref('ex3-1');
              </script>

Vertical

Stack your navigation by changing the flex item direction with the vertical property. Need to stack them on some viewports but not others? Use the responsive versions (e.g., vertical="lg: which will make tab nav horizontal on large screens).

For proper layout, you can also use col property on MDBTabNav and MDBTabContent to define how much of the grid space these elements take.

Home Profile Messages
Home content
Profile content
Messages content 
        
            
            <template>
              <MDBTabs v-model="activeTabId4" vertical>
                <!-- Tabs navs -->
                <MDBTabNav tabsClasses="mb-3 text-center">
                  <MDBTabItem :wrap="false" tabId="ex4-1" href="ex4-1">Home</MDBTabItem>
                  <MDBTabItem :wrap="false" tabId="ex4-2" href="ex4-2">Profile</MDBTabItem>
                  <MDBTabItem :wrap="false" tabId="ex4-3" href="ex4-3">Messages</MDBTabItem>
                </MDBTabNav>
                <!-- Tabs navs -->
                <!-- Tabs content -->
                <MDBTabContent>
                  <MDBTabPane tabId="ex4-1">Tab 1 content</MDBTabPane>
                  <MDBTabPane tabId="ex4-2">Tab 2 content</MDBTabPane>
                  <MDBTabPane tabId="ex4-3">Tab 3 content</MDBTabPane>
                </MDBTabContent>
                <!-- Tabs content -->
              </MDBTabs>
            </template>
          
        
    
        
            
            <script>
              import {
                MDBTabs,
                MDBTabNav,
                MDBTabContent,
                MDBTabItem,
                MDBTabPane,
              } from 'mdb-vue-ui-kit';
              import { ref } from 'vue';

              export default {
                components: {
                  MDBTabs,
                  MDBTabNav,
                  MDBTabContent,
                  MDBTabItem,
                  MDBTabPane,
                },
                setup() {
                  const activeTabId4 = ref('ex4-1');

                  return {
                    activeTabId4,
                  };
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import {
                MDBTabs,
                MDBTabNav,
                MDBTabContent,
                MDBTabItem,
                MDBTabPane,
              } from 'mdb-vue-ui-kit';
              import { ref } from 'vue';

              const activeTabId4 = ref('ex4-1');
            </script>

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 
        
            
            <template>
              <MDBTabs v-model="activeTabId5">
                <!-- Tabs navs -->
                <MDBTabNav tabsClasses="mb-3">
                  <MDBTabItem tabId="ex5-1" href="ex5-1">
                    <i class="fas fa-chart-pie fa-fw me-2"></i>Sales
                  </MDBTabItem>
                  <MDBTabItem tabId="ex5-2" href="ex5-2">
                    <i class="fas fa-chart-line fa-fw me-2"></i>Subscriptions
                  </MDBTabItem>
                  <MDBTabItem tabId="ex5-3" href="ex5-3">
                    <i class="fas fa-cogs fa-fw me-2"></i>Settings
                  </MDBTabItem>
                </MDBTabNav>
                <!-- Tabs navs -->
                <!-- Tabs content -->
                <MDBTabContent>
                  <MDBTabPane tabId="ex5-1">Tab 1 content</MDBTabPane>
                  <MDBTabPane tabId="ex5-2">Tab 2 content</MDBTabPane>
                  <MDBTabPane tabId="ex5-3">Tab 3 content</MDBTabPane>
                </MDBTabContent>
                <!-- Tabs content -->
              </MDBTabs>
            </template>
          
        
    
        
            
            <script>
              import {
                MDBTabs,
                MDBTabNav,
                MDBTabContent,
                MDBTabItem,
                MDBTabPane,
              } from 'mdb-vue-ui-kit';
              import { ref } from 'vue';

              export default {
                components: {
                  MDBTabs,
                  MDBTabNav,
                  MDBTabContent,
                  MDBTabItem,
                  MDBTabPane,
                },
                setup() {
                  const activeTabId5 = ref('ex5-1');

                  return {
                    activeTabId5,
                  };
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import {
                MDBTabs,
                MDBTabNav,
                MDBTabContent,
                MDBTabItem,
                MDBTabPane,
              } from 'mdb-vue-ui-kit';
              import { ref } from 'vue';

              const activeTabId5 = ref('ex5-1');
            </script>

Tabs with buttons

Dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices, require role="tablist", role="tab", role="tabpanel", and additional aria- attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers). As a best practice, we recommend using <button> elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.

Tab 1 content.
Tab 2 content
Tab 3 content 
        
            
          <template>
            <MDBTabs v-model="activeTabId6">
              <!-- Tabs navs -->
              <MDBTabNav tabsClasses="mb-3 text-center">
                <MDBTabItem tag="button" :wrap="false" tabId="ex6-1"
                  >Home</MDBTabItem
                >
                <MDBTabItem tag="button" :wrap="false" tabId="ex6-2"
                  >Profile</MDBTabItem
                >
                <MDBTabItem tag="button" :wrap="false" tabId="ex6-3"
                  >Messages</MDBTabItem
                >
              </MDBTabNav>
              <!-- Tabs navs -->
  
              <!-- Tabs content -->
              <MDBTabContent>
                <MDBTabPane tabId="ex6-1">Tab 1 content</MDBTabPane>
                <MDBTabPane tabId="ex6-2">Tab 2 content</MDBTabPane>
                <MDBTabPane tabId="ex6-3">Tab 3 content</MDBTabPane>
              </MDBTabContent>
              <!-- Tabs content -->
            </MDBTabs>
          </template>
        
        
    
        
            
          <script>
            import {
                MDBTabs,
                MDBTabNav,
                MDBTabContent,
                MDBTabItem,
                MDBTabPane,
              } from 'mdb-vue-ui-kit';
              import { ref } from 'vue';

              export default {
                components: {
                  MDBTabs,
                  MDBTabNav,
                  MDBTabContent,
                  MDBTabItem,
                  MDBTabPane,
                },
                setup() {
                  const activeTabId6 = ref('ex6-1');

                  return {
                    activeTabId5,
                  };
                },
              };
          </script>
        
        
    
        
            
          <script setup lang="ts">
            import {
              MDBTabs,
              MDBTabNav,
              MDBTabContent,
              MDBTabItem,
              MDBTabPane,
            } from 'mdb-vue-ui-kit';
            import { ref } from 'vue';

            const activeTabId6 = ref('ex6-1');
          </script>

Tabs - API

Import

        
            
        <script>
          import {
            MDBTabs,
            MDBTabNav,
            MDBTabContent,
            MDBTabItem,
            MDBTabPane
          } from 'mdb-vue-ui-kit';
        </script>

Properties

MDBTabs

Name Type Default Description Example
tag String 'div' Defines tag of the MDBTabs element <MDBTabs tag="section" />
vertical Boolean | String false Changes tabs display to horizontal at all breakpoints when no value is passed and to a specific breakpoint when a value is passed. Use (sm | md | lg | xl | xxl ) values <MDBTabs vertical /> <MDBTabs vertical="md" />
v-model String Indicate active tab id <MDBTabs v-model="id-1" />

MDBTabNav

Name Type Default Description Example
tag String 'ul' Defines tag of the MDBTabNav element <MDBTabNav tag="div" />
pills Boolean false Changes the tabs into pills. <MDBTabNav pills />
justify Boolean false Make MDBTabItems of equal width <MDBTabNav justify />
fill Boolean false Make MDBTabItems fill all available space. <MDBTabNav fill />
col String '3' Define grid column class for vertically placed MDBTabNav component <MDBTabNav col="6" />
tabsClasses String Adds custom classes to element <MDBTabNav tabsClasses="mb-3" />

MDBTabContent

Name Type Default Description Example
tag String 'div' Defines tag of the MDBTabContent element <MDBTabContent tag="section" />
col String '9' Define grid column class for vertically placed MDBTabContent component <MDBTabContent col="6" />
contentClasses String Adds custom classes to element <MDBTabNav contentClasses="mb-3" />

MDBTabItem

Name Type Default Description Example
tag String 'a' Defines tag of the MDBTabItem element <MDBTabItem tag="div" />
tabId String Define id that connects MDBTabItem with MDBTabPane. <MDBTabItem tabId="id-1" />

MDBTabPane

Name Type Default Description Example
tag String 'div' Defines tag of the MDBTabPane element <MDBTabPane tag="div" />
tabId String Define id that connects MDBTabPane with MDBTabItem. <MDBTabPane tabId="id-1" />

Events

When showing a new tab, the events are fired on MDBTabs in the following order:

  1. hide (on the current active tab)
  2. show (on the to-be-shown tab)
  3. hidden (on the previous active tab, the same one as for the hide event)
  4. shown (on the newly-active just-shown tab, the same one as for the show event)

If no tab was already active, then the hide and hidden events will not be fired.

Event type Description
show This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
shown This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
hide This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively.
hidden This event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively. 
        
            
          <template>
            <MDBTabs v-model="activeTabId" @show="doSomething">
              ...
            </MDBTabs>
          </template>

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;