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>

Pills with icons

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

Tab 1 content
Tab 2 content
Tab 3 content 
<mdb-tabs [pills]="true">
  <mdb-tab>
    <ng-template mdbTabTitle
      ><span><i class="fas fa-chart-pie fa-fw me-2"></i>Sales</span></ng-template
    >
    Tab content 1
  </mdb-tab>
  <mdb-tab>
    <ng-template mdbTabTitle
      ><span><i class="fas fa-chart-line fa-fw me-2"></i>Subscriptions</span></ng-template
    >
    Tab content 2
  </mdb-tab>
  <mdb-tab>
    <ng-template mdbTabTitle
      ><span><i class="fas fa-cogs fa-fw me-2"></i>Settings</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 [pills]="true" (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 { Component } from '@angular/core';
import { MdbTabChange } from 'mdb-angular-ui-kit/tabs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  onTabChange(event: MdbTabChange): void {
    console.log(event);
  }
}

Methods

Name Description Example
setActiveTab(index: number) Set desired tab as active tabs.setActiveTab(1) 
<mdb-tabs #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>
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MdbTabsComponent } from 'mdb-angular-ui-kit/tabs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements AfterViewInit {
  @ViewChild('tabs') tabs!: MdbTabsComponent;

  ngAfterViewInit(): void {
    setTimeout(() => {
      this.tabs.setActiveTab(1);
    }, 0);
  }
}

CSS variables

As part of MDB’s evolving CSS variables approach, pills 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.

Pills 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-pills
// .nav-link
--#{$prefix}nav-pills-link-border-radius: #{$nav-pills-link-border-radius};
--#{$prefix}nav-pills-link-font-size: #{$nav-pills-link-font-size};
--#{$prefix}nav-pills-link-padding-top: #{$nav-pills-link-padding-top};
--#{$prefix}nav-pills-link-padding-bottom: #{$nav-pills-link-padding-bottom};
--#{$prefix}nav-pills-link-padding-x: #{$nav-pills-link-padding-x};
--#{$prefix}nav-pills-link-line-height: #{$nav-pills-link-line-height};
--#{$prefix}nav-pills-link-hover-bg: #{$nav-pills-link-hover-bg};
--#{$prefix}nav-pills-link-font-weight: #{$nav-pills-link-font-weight};
--#{$prefix}nav-pills-link-color: #{$nav-pills-link-color};
--#{$prefix}nav-pills-margin: #{$nav-pills-margin};

// .nav-link.active,
// .show > .nav-link
--#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
--#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-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-pills-border-radius: $border-radius;

$nav-pills-margin: 0.5rem;
$nav-pills-link-border-radius: 0.25rem;
$nav-pills-link-font-size: $nav-tabs-link-font-size;
$nav-pills-link-padding-top: $nav-tabs-link-padding-top;
$nav-pills-link-padding-bottom: $nav-tabs-link-padding-bottom;
$nav-pills-link-padding-x: $nav-tabs-link-padding-x;
$nav-pills-link-line-height: 1;
$nav-pills-link-background-color: $nav-tabs-link-hover-background-color;
$nav-pills-link-font-weight: $nav-tabs-link-font-weight;
$nav-pills-link-color: $nav-tabs-link-color;
$nav-pills-link-hover-bg: $nav-tabs-link-hover-bgc;
$nav-pills-link-active-bg: #e3ebf7;
$nav-pills-link-active-color: #285192;