Header & Footer

Menu Toggle

A hamburger button that opens an off-canvas drawer.

Live demo

See it in action

Bars (≡)

Dots (⋮)

The markup

Clean, lean code

This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.

<section class="fw-flexbox fw-flex fw-contained fw-collapse">
	<p class="sc-spec-label">Bars (≡)</p>
	<button type="button" class="menu-toggle mt-43175f28 menu-toggle--bars" aria-controls="primary-navigation-drawer" aria-expanded="false" aria-label="Menu"><span class="menu-toggle__bar"></span><span class="menu-toggle__bar"></span><span class="menu-toggle__bar"></span></button>
	<p class="sc-spec-label">Dots (⋮)</p>
	<button type="button" class="menu-toggle mt-b031c000 menu-toggle--dots" aria-controls="primary-navigation-drawer" aria-expanded="false" aria-label="Menu"><span class="menu-toggle__dot"></span><span class="menu-toggle__dot"></span><span class="menu-toggle__dot"></span></button>
</section>

To learn more about the Menu Toggle shortcode, please check out the online manual here.