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

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

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

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

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