menu MDUI Documentation
color_lens
near_me
Start
keyboard_arrow_down
Instalation Compatibility JavaScript tool library JavaScript global methods
layers
Style
keyboard_arrow_down
Colors and themes Font Grid layout Typography Icon Media Helper class Shadow
widgets
Component
keyboard_arrow_down
Ripple animation effect Button Floating operation button Drop-down selection Divider Expandable panel Text box Select control Slider List List control Grid list Tab Tab toolbar App bar Navigation drawer Bottom navigation bar Card Scrap of paper Tooltip Snackbar Table Dialog box Menu Progress indicator
view_carousel
JavaScript Plug-in
keyboard_arrow_down
Collapse Headroom
local_mall
Resources
keyboard_arrow_down
Material icon

toolbar

A toolbar is a collection of components arranged horizontally, which can contain elements such as text, links, buttons, icons and buttons.

Call method

Toolbar components are written in pure CSS, and only need to write HTML code to take effect.

color

The default is transparent background, add class .mdui-color-[color] You can set the background color.

Related Reading

Material Design Guidelines: Components-Toolbar

Material Design Guidelines: Structure-Toolbar

style

Basic style

You can place in the toolbar:

  • text:<span>Title</span>
  • link:<a href="#">Link</a>
  • Button:<a href="#" class="mdui-btn">button</a>
  • Icon button:<a href="#" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a>
  • icon:<i class="mdui-icon material-icons">menu</i>

Add to <div class="mdui-toolbar-spacer"></div> Will push the content on both sides of the element to the sides.

codeplay_arrow
Example
menu Title
search refresh more_vert 
<div class="mdui-toolbar">
  <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a>
  <span class="mdui-typo-title">Title</span>
  <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>

Background color

codeplay_arrow
Example
menu Title
search refresh more_vert 
<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>
  <span class="mdui-typo-title">Title</span>
  <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>

List of CSS class names

Class name effect
.mdui-toolbar Define a toolbar.
.mdui-toolbar-spacer The elements on both sides of the element will be pushed to the sides.
arrow_back Previous
Tab tab
arrow_forward Next
App bar
Set document theme

Theme color

Main color

Accent color