arrow_back Tabs
Item One Item Two Three
Basic Tab Bar Item One Item Two Three

Basic Tab Bar w/ Custom Label Color One (undefined) Two ("Two") Three (3)

Clicked:

Tab Bar with Scroller

Item {{ num }}

Icon Tab Labels phone favorite person_pin
Icon Tab Labels w/ Custom Icon Color phone favorite person_pin
Icon & Text Labels Recents Favorites Nearby
Icon & Text Labels w/ Custom Colors Recents Favorites Nearby

Custom Indicator Color

Item {{ item }}

Within mdc-toolbar

Title

Item One Item Two Item Three
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;
}

Title

Item One Item Two Item Three
Within mdc-toolbar + custom color indicator
Note: Changing the toolbar's background color here so that the primary indicator can be visible

Title

Item One Item Two Item Three
Within Toolbar, Dynamic Content Control
Item One Item Two Item Three

Item One

Item Two

Item Three