Pills

Angular Bootstrap 5 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

Use [pills]="true" input to change from tabs layout to pills layout.

Tab 1 content
Tab 2 content
Tab 3 content 
        
            
            <mdb-tabs [pills]="true">
              <mdb-tab title="Tab 1">Tab content 1</mdb-tab>
              <mdb-tab title="Tab 2">Tab content 2</mdb-tab>
              <mdb-tab title="Tab 3">Tab content 3</mdb-tab>
            </mdb-tabs>

Fill and justify

Force the contents of your tab to extend the full available width using following settings.

Fill

To proportionately fill all available space, use [fill]="true" input. 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 
        
            
              <mdb-tabs [pills]="true" [fill]="true">
                <mdb-tab title="Tab 1">Tab content 1</mdb-tab>
                <mdb-tab title="Tab 2">Tab content 2</mdb-tab>
                <mdb-tab title="Tab 3">Tab content 3</mdb-tab>
              </mdb-tabs>

Justify

For equal-width elements, use [justified]="true" input. All horizontal space will be occupied by nav links, but unlike the [fill]="true" above, every nav item will be the same width.

Tab 1 content
Tab 2 content
Tab 3 content 
        
            
              <mdb-tabs [pills]="true" [justified]="true">
                <mdb-tab title="Link">Tab content 1</mdb-tab>
                <mdb-tab title="Very very very very long link">Tab content 2</mdb-tab>
                <mdb-tab title="Another link">Tab content 3</mdb-tab>
              </mdb-tabs>

Vertical

Use [vertical]="true" input to change the layout direction.

Home Profile Messages
Home content
Profile content
Messages content 
        
            
            <mdb-tabs [pills]="true" [vertical]="true">
              <mdb-tab title="Home">Home content</mdb-tab>
              <mdb-tab title="Profile">Profile content</mdb-tab>
              <mdb-tab title="Messages">Messages content</mdb-tab>
            </mdb-tabs>

Custom title template

If you need to add a title that is more complex than simple string, use ng-template with mdbTabTitle directive. 

        
            
            <mdb-tabs [pills]="true">
              <mdb-tab>
                <ng-template mdbTabTitle><span><i class="fab fa-lg fa-mdb me-2"></i> Tab 1</span></ng-template>
                Tab content 1
              </mdb-tab>
              <mdb-tab>
                <ng-template mdbTabTitle><span><i class="fab fa-lg fa-mdb me-2"></i> Tab 2</span></ng-template>
                Tab content 2
              </mdb-tab>
              <mdb-tab>
                <ng-template mdbTabTitle><span><i class="fab fa-lg fa-mdb me-2"></i> Tab 3</span></ng-template>
                Tab content 3
              </mdb-tab>
            </mdb-tabs>

Lazy loading

You can use ng-template with mdbTabContent directive to lazy load tab content. The content will be loaded only when tab is activated. 

        
            
            <mdb-tabs [pills]="true">
              <mdb-tab title="Tab 1">
                <ng-template mdbTabContent> Tab content 1 </ng-template>
              </mdb-tab>
              <mdb-tab title="Tab 2">
                <ng-template mdbTabContent> Tab content 2 </ng-template>
              </mdb-tab>
              <mdb-tab title="Tab 3">
                <ng-template mdbTabContent> Tab content 3 </ng-template>
              </mdb-tab>
            </mdb-tabs>

Pills - API

Import

        
            
          import { MdbTabsModule } from 'mdb-angular-ui-kit/tabs';
          …
          @NgModule ({
            ...
            imports: [MdbTabsModule],
            ...
          })

Inputs

MdbTabComponent

Name Type Default Description
disabled boolean false Disables the specific tab.
title string '' Changes title of the tab.

MdbTabsComponent

Name Type Default Description
fill boolean false Forces tabs content to extend the full available width.
justified boolean false Makes all tabs equal width and forces them to take full available width.
pills boolean false Changes to pills layout.
vertical boolean false Changes to vertical layout.

Outputs

Name Type Description
activeTabChange EventEmitter<MdbTabChange> Event fired when active tab changes. 
        
            
              <mdb-tabs (activeTabChange)="onTabChange($event)">
                <mdb-tab title="Tab 1">Tab content 1</mdb-tab>
                <mdb-tab title="Tab 2">Tab content 2</mdb-tab>
                <mdb-tab title="Tab 3">Tab content 3</mdb-tab>
              </mdb-tabs>
            
        
    
        
            
              import { MdbTabChange } from 'mdb-angular-ui-kit/tabs';

              onTabChange(event: MdbTabChange):void {
                console.log(event);
              }

Methods

Name Description Example
setActiveTab(index: number) Manually close the component tabs.setActiveTab(1) 
        
            
              <mdb-tabs #tabs>
                <mdb-tab title="Tab 1">Tab content 1</mdb-tab>
                <mdb-tab title="Tab 2">Tab content 2</mdb-tab>
                <mdb-tab title="Tab 3">Tab content 3</mdb-tab>
              </mdb-tabs>
            
        
    
        
            
              import { MdbTabsComponent } from 'mdb-angular-ui-kit/tabs';

              @ViewChild('tabs') tabs: MdbTabsComponent;

              ngAfterViewInit(): void {
                this.tabs.setActiveTab(1);
              }