Pills

Vue Pills component

Pills 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 pills are based on Tabs and are divided into 2 main sections - Pills navs (containing MDBTabItems) and Pills content (containing MDBTabPanes). To create pills instead of tabs simply add pills property to MDBTabNav component.

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

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

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

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

Pills - 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" />
wrap Boolean true Wraps MDBNavItem link element with li.nav-item element <MDBTabNav :wrap="false" />

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.