menuMDUIDocs
color_lens
The new mdui 2 based on Material Design 3 and Web Components is now available. Check out the mdui 2 documentation.

App Bar

Call via custom attributes (if the component is dynamically generated, you need to call <a href="/en/docs/1/global#mutation"><code>mdui.mutation()</code></a> for initialization)

Usage

Material Design Guidelines: Components - Tabs

Color

Basic styles

Related Reading

Scrollable

Style

Center aligned

codeplay_arrow
Example
<div class="mdui-appbar">
  <div class="mdui-toolbar mdui-color-theme">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">menu</i>
    </a>
    <a href="javascript:;" class="mdui-typo-headline">MDUI</a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <div class="mdui-toolbar-spacer"></div>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">search</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">refresh</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">more_vert</i>
    </a>
  </div>
</div>

100% width

codeplay_arrow
Example
<div class="mdui-appbar">
  <div class="mdui-tab mdui-color-theme" mdui-tab>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">web</a>
    <a href="#example3-tab2" class="mdui-ripple mdui-ripple-white">shopping</a>
    <a href="#example3-tab3" class="mdui-ripple mdui-ripple-white">videos</a>
  </div>
</div>

With icons

codeplay_arrow
Example
<div class="mdui-appbar">
  <div class="mdui-toolbar mdui-color-theme">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">menu</i>
    </a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <div class="mdui-toolbar-spacer"></div>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">search</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">refresh</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">more_vert</i>
    </a>
  </div>
  <div class="mdui-tab mdui-color-theme" mdui-tab>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">web</a>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">shopping</a>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">videos</a>
  </div>
</div>
codeplay_arrow
Example
<div class="mdui-appbar">
  <div class="mdui-toolbar mdui-color-theme">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">menu</i>
    </a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <div class="mdui-toolbar-spacer"></div>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">search</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">refresh</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">more_vert</i>
    </a>
  </div>
  <div class="mdui-tab mdui-color-theme" mdui-tab>
    <a href="#example6-tab1" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">phone</i>
      <label>recents</label>
    </a>
    <a href="#example6-tab2" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">favorite</i>
      <label>favorites</label>
    </a>
    <a href="#example6-tab3" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">perm_contact_calendar</i>
      <label>nearby</label>
    </a>
  </div>
</div>

With icons and text

Below is a standard tab. It occupies 100% width on mobile, with each tab having equal width; it is left-aligned on tablets/PCs.

codeplay_arrow
Example
<div class="mdui-appbar mdui-shadow-0">
  <div class="mdui-toolbar">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">menu</i>
    </a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <div class="mdui-toolbar-spacer"></div>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">search</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">refresh</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">more_vert</i>
    </a>
  </div>
</div>

With background color

Add the class .mdui-tab-scrollable to <div class="mdui-tab"> to make the tabs horizontally scrollable, commonly used in mobile scenarios with many options.

Add the class .mdui-tab-centered to the <div class="mdui-tab"></div> element to center-align the tabs on tablets/PCs.

  • Add the class .mdui-tab-full-width to the <div class="mdui-tab"></div> element to make the tabs always occupy 100% width, with each tab having equal width.
  • Add the class .mdui-color-[color] to the <div class="mdui-tab"></div> element to give the tabs a background color.
  • Add the class .mdui-tab-active to the <a> element to make the option active by default.

Add the disabled attribute to the <a> element to disable the option.

Using this method does not require writing JavaScript code; simply add the <code>mdui-tab="<a href="#option">options</a>"</code> attribute to the <code>&lt;div class=&quot;mdui-tab&quot;&gt;&lt;/div&gt;</code> element to activate the component.If the component is dynamically generated, you need to call <a href="/en/docs/1/global#mutation"><code>mdui.mutation()</code></a> for initialization.Instantiate the component:

Default active option

selector is the CSS selector or DOM element of the .mdui-tab element

options is the parameters of the plugin; see the parameter list below

<body class="mdui-appbar-with-toolbar">
  <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-hide">
    <div class="mdui-toolbar">
      ......
    </div>
  </div>
</body>
Run

Disabled option

Trigger method for switching tabs.

click: Click to switch

<body class="mdui-appbar-with-toolbar mdui-appbar-with-tab">
  <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-toolbar-hide">
    <div class="mdui-toolbar">
      ......
    </div>
    <div class="mdui-tab">
      ......
    </div>
  </div>
</body>
Run

CSS Classes

Class NameDescription
.mdui-appbar<code>hover</code>: Hover to switch
.mdui-appbar-fixedWhether to enable cyclic switching. If <code>true</code>, calling the next method while the last option is active will return to the first option, and calling the prev method while the first option is active will return to the last option.
.mdui-appbar-with-toolbarSwitch to the previous option
.mdui-appbar-with-tabSwitch to the next option
.mdui-appbar-with-tab-largerShow the specified option.
.mdui-appbar-scroll-hide<code>index</code>: The index number or id of the option
.mdui-appbar-scroll-toolbar-hideWhen the width of the parent element changes, you need to call this method to reset the indicator position.
arrow_backPrevious
Toolbar
arrow_forwardNext
Navigation Drawer