Nástrojová lišta je sada vodorovně uspořádaných prvků, která může obsahovat text, odkazy, tlačítka, ikony a další.
Komponenta nástrojové lišty je napsána v čistém CSS, takže k její funkci stačí jen HTML kód.
Ve výchozím nastavení má průhledné pozadí. Barvu pozadí lze nastavit přidáním třídy .mdui-color-[barva].
Do nástrojové lišty lze umístit:
<span>Nadpis</span><a href="#">Odkaz</a><a href="#" class="mdui-btn">tlačítko</a><a href="#" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a><i class="mdui-icon material-icons">menu</i>Vložením prvku <div class="mdui-toolbar-spacer"></div> odtlačíte obsah po obou stranách tohoto prvku k okrajům lišty.
<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><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>