Tabs

Default tabs

Pane-1
Pane-2
Pane-3
<ul class="mui-tabs__bar">
  <li class="mui--is-active"><a data-mui-toggle="tab" data-mui-controls="pane-default-1">Tab-1</a></li>
  <li><a data-mui-toggle="tab" data-mui-controls="pane-default-2">Tab-2</a></li>
  <li><a data-mui-toggle="tab" data-mui-controls="pane-default-3">Tab-3</a></li>
</ul>
<div class="mui-tabs__pane mui--is-active" id="pane-default-1">Pane-1</div>
<div class="mui-tabs__pane" id="pane-default-2">Pane-2</div>
<div class="mui-tabs__pane" id="pane-default-3">Pane-3</div>
View in new tab »

Justified tabs

Pane-1
Pane-2
Pane-3
<ul class="mui-tabs__bar mui-tabs__bar--justified">
  <li class="mui--is-active"><a data-mui-toggle="tab" data-mui-controls="pane-justified-1">Tab-1</a></li>
  <li><a data-mui-toggle="tab" data-mui-controls="pane-justified-2">Tab-2</a></li>
  <li><a data-mui-toggle="tab" data-mui-controls="pane-justified-3">Tab-3</a></li>
</ul>
<div class="mui-tabs__pane mui--is-active" id="pane-justified-1">Pane-1</div>
<div class="mui-tabs__pane" id="pane-justified-2">Pane-2</div>
<div class="mui-tabs__pane" id="pane-justified-3">Pane-3</div>
View in new tab »

JavaScript Events

The following events get dispatched on toggle elements:

  • mui.tabs.showstart - Fires when tab is activated but before pane is visible
  • mui.tabs.showend - Fires when pane is visible
  • mui.tabs.hidestart - Fires when tab is inactivated but before pane is hidden
  • mui.tabs.hideend - Fires when pane is hidden

Each event object contains the following custom attributes:

  • paneId - The pane ID being shown/hidden
  • relatedPaneId - The pane ID being hidden/shown
Pane-1
Pane-2
Pane-3
<ul class="mui-tabs__bar">
  <li class="mui--is-active"><a data-mui-toggle="tab" data-mui-controls="pane-events-1">Tab-1</a></li>
  <li><a data-mui-toggle="tab" data-mui-controls="pane-events-2">Tab-2</a></li>
  <li><a data-mui-toggle="tab" data-mui-controls="pane-events-3">Tab-3</a></li>
</ul>
<div class="mui-tabs__pane mui--is-active" id="pane-events-1">Pane-1</div>
<div class="mui-tabs__pane" id="pane-events-2">Pane-2</div>
<div class="mui-tabs__pane" id="pane-events-3">Pane-3</div>
<script>
  // get toggle elements
  var toggleEls = document.querySelectorAll('[data-mui-controls^="pane-events-"]');

  function logFn(ev) {
    var s = '[' + ev.type + ']';
    s += ' paneId: ' + ev.paneId;
    s += ' relatedPaneId: ' + ev.relatedPaneId;
    console.log(s);
  }

  // attach event handlers
  for (var i=0; i < toggleEls.length; i++) {
    toggleEls[i].addEventListener('mui.tabs.showstart', logFn);
    toggleEls[i].addEventListener('mui.tabs.showend', logFn);
    toggleEls[i].addEventListener('mui.tabs.hidestart', logFn);
    toggleEls[i].addEventListener('mui.tabs.hideend', logFn);
  }
</script>
View in new tab »

Tabs API

To activate tabs programmatically use the mui.tabs.activate(paneId) method:

Pane-1
Pane-2
Pane-3
<ul class="mui-tabs__bar">
  <li class="mui--is-active"><a data-mui-toggle="tab" data-mui-controls="pane-api-1">Tab-1</a></li>
  <li><a data-mui-toggle="tab" data-mui-controls="pane-api-2">Tab-2</a></li>
  <li><a data-mui-toggle="tab" data-mui-controls="pane-api-3">Tab-3</a></li>
</ul>
<div class="mui-tabs__pane mui--is-active" id="pane-api-1">Pane-1</div>
<div class="mui-tabs__pane" id="pane-api-2">Pane-2</div>
<div class="mui-tabs__pane" id="pane-api-3">Pane-3</div>
<script>
  var paneIds = ['pane-api-1', 'pane-api-2', 'pane-api-3'],
      currPos = 0;

  function activateNext() {
    // increment id
    currPos = (currPos + 1) % paneIds.length;

    // activate tab
    mui.tabs.activate(paneIds[currPos]);
  }
</script>
<button class="mui-btn mui-btn--primary" onclick="activateNext();">Next</button>
View in new tab »
« Previous Next »