ClickWebExpress
ClickWebExpress

MDL Tabs

The Material Design Lite (MDL) tab component is a user interface element that allows different content blocks to share the same screen space in a mutually exclusive manner. Tabs are always presented in sets of two or more, and they make it easy to explore and switch among different views or functional aspects of an app, or to browse categorized data sets individually. Tabs serve as "headings" for their respective content; the active tab — the one whose content is currently displayed — is always visually distinguished from the others so the user knows which heading the current content belongs to.

Tabs are an established but non-standardized feature in user interfaces, and allow users to view different, but often related, blocks of content (often called panels). Tabs save screen real estate and provide intuitive and logical access to data while reducing navigation and associated user confusion. Their design and use is an important factor in the overall user experience.


TAB 1 TAB 2 TAB 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tincidunt, quam non pharetra eleifend, ante nisi laoreet magna, id rhoncus orci ante ac arcu. Nunc mollis lacus non tortor iaculis pulvinar. Proin pretium sagittis quam, vel scelerisque libero condimentum et. Morbi a velit a sem lobortis scelerisque. Vivamus a convallis urna, vitae vehicula mi. In hac habitasse platea dictumst. Nam lacinia diam vitae lacinia gravida.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tincidunt, quam non pharetra eleifend, ante nisi laoreet magna, id rhoncus orci ante ac arcu. Nunc mollis lacus non tortor iaculis pulvinar. Proin pretium sagittis quam, vel scelerisque libero condimentum et. Morbi a velit a sem lobortis scelerisque. Vivamus a convallis urna, vitae vehicula mi. In hac habitasse platea dictumst. Nam lacinia diam vitae lacinia gravida.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tincidunt, quam non pharetra eleifend, ante nisi laoreet magna, id rhoncus orci ante ac arcu. Nunc mollis lacus non tortor iaculis pulvinar. Proin pretium sagittis quam, vel scelerisque libero condimentum et. Morbi a velit a sem lobortis scelerisque. Vivamus a convallis urna, vitae vehicula mi. In hac habitasse platea dictumst. Nam lacinia diam vitae lacinia gravida.


Content tabs
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
  <div class="mdl-tabs__tab-bar">
      <a href="#starks-panel" class="mdl-tabs__tab is-active">TAB 1</a>
      <a href="#lannisters-panel" class="mdl-tabs__tab">TAB 2</a>
      <a href="#targaryens-panel" class="mdl-tabs__tab">TAB 3</a>
  </div>

  <div class="mdl-tabs__panel is-active" id="starks-panel">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tincidunt, quam non pharetra eleifend, ante nisi laoreet magna, id rhoncus orci ante ac arcu. Nunc mollis lacus non tortor iaculis pulvinar. Proin pretium sagittis quam, vel scelerisque libero condimentum et.
    </p>
  </div>
  <div class="mdl-tabs__panel" id="lannisters-panel">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tincidunt, quam non pharetra eleifend, ante nisi laoreet magna, id rhoncus orci ante ac arcu. Nunc mollis lacus non tortor iaculis pulvinar. Proin pretium sagittis quam, vel scelerisque libero condimentum et.
    </p>
  </div>
  <div class="mdl-tabs__panel" id="targaryens-panel">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tincidunt, quam non pharetra eleifend, ante nisi laoreet magna, id rhoncus orci ante ac arcu. Nunc mollis lacus non tortor iaculis pulvinar. Proin pretium sagittis quam, vel scelerisque libero condimentum et.
    </p>
  </div>
</div>
 
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>

Instructions

 1. Code a <div> element; this is the "outer" div, intended to contain all of the tabs and their content.

<div>
</div>

 2. Inside the "outer" div, code one "inner" div for the tabs themselves, and one for each tab's content, all siblings. That is, for three content tabs, you would code four "inner" divs.

<div>
  <div>
  ...
  </div>
  <div>
  ...
  </div>
  <div>
  ...
  </div>
  <div>
  ...
  </div>
</div>

 3. Inside the first "inner" div (the tabs), code one anchor <a> (link) tag for each tab. Include href attributes with values to match the tabs' id attribute values, and some brief link text. On the remaining "inner" divs (the content), code id attributes whose values match the links' hrefs.

<div>
  <div>
    <a href="#tab1">Tab One</a>
    <a href="#tab2">Tab Two</a>
    <a href="#tab3">Tab Three</a>
  </div>
  <div id="tab1">
  ...
  </div>
  <div id="tab2">
  ...
  </div>
  <div id="tab3">
  ...
  </div>
</div>

 4. Inside the remaining "inner" divs, code the content you intend to display in each panel; use standard HTML tags to structure the content as desired.

<div>
  <div>
    <a href="#tab1">Tab One</a>
    <a href="#tab2">Tab Two</a>
    <a href="#tab3">Tab Three</a>
  </div>
  <div id="tab1">
    <p>First tab's content.</p>
  </div>
  <div id="tab2">
    <p>Second tab's content.</p>
  </div>
  <div id="tab3">
    <p>Third tab's content.</p>
  </div>
</div>

 5. Add one or more MDL classes, separated by spaces, to the "outer" and "inner" divs using the class attribute; be sure to include the is-active class on the tab you want to be displayed by default.

<div class="mdl-tabs mdl-js-tabs">
  <div class="mdl-tabs__tab-bar">
    <a href="#tab1" class="mdl-tabs__tab">Tab One</a>
    <a href="#tab2" class="mdl-tabs__tab">Tab Two</a>
    <a href="#tab3" class="mdl-tabs__tab">Tab Three</a>
  </div>
  <div class="mdl-tabs__panel is-active" id="tab1">
    <p>First tab's content.</p>
  </div>
  <div class="mdl-tabs__panel" id="tab2">
    <p>Second tab's content.</p>
  </div>
  <div class="mdl-tabs__panel" id="tab3">
    <p>Third tab's content.</p>
  </div>
</div>

The tab components are ready for use.

CSS classes

The MDL CSS classes apply various predefined visual and behavioral enhancements to the tabs. The table below lists the available classes and their effects.

MDL class Effect Remarks
mdl-tabs Defines a tabs container as an MDL component Required on "outer" div element
mdl-js-tabs Assigns basic MDL behavior to tabs container Required on "outer" div element
mdl-js-ripple-effect Applies ripple click effect to tab links Optional; goes on "outer" div element
mdl-tabs__tab-bar Defines a container as an MDL Tabs link bar Required on first "inner" div element
mdl-tabs__tab Defines an anchor (link) as an MDL tab activator Required on all links in first "inner" div element
is-active Defines a tab as the default display tab Required on one (and only one) of the "inner" div (tab) elements
mdl-tabs__panel Defines a container as tab content Required on each of the "inner" div (tab) elements