Basic Tab Bar
CSS-Only Tab Bar
Icon Tab Labels
CSS-Only Icon Tab Labels
Icon & Text Labels
CSS-Only Icon & Text Labels
Primary Color Indicator
Primary Color Indicator - CSS-Only
Accent Color Indicator
Accent Color Indicator - CSS-Only
Within mdc-toolbar
Within MDCToolbar - fixed to bottom of toolbar
Note: We want to avoid too many modifier classes for layouts like this. Therefore, we recommend overriding the style of mdc-toolbar__section for the MDCTabBar instance you'd like affixed to the bottom edge of mdc-toolbar. The style used to acheive this example is:

.my-modified-toolbar-section {
  position: absolute;
  right: 0;
  bottom: -16px;

[dir="rtl"] .my-modified-toolbar-section {
  right: auto;
  left: 0;
Within mdc-toolbar, CSS-Only
Within mdc-toolbar + primary indicator
Note: Changing the toolbar's background color here so that the primary indicator can be visible
Within mdc-toolbar + primary indicator, CSS-Only
Within mdc-toolbar + accent indicator
Within mdc-toolbar + accent indicator, CSS-Only
Within Toolbar, Dynamic Content Control

Item One