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
Show code

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
Show code

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
Show code

Vertical

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

Home Profile Messages
Home content
Profile content
Messages content
Show code

Custom title template

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

Show code

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
Show code

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.

Show code