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>
	<div class="fw-container">
		<div class="fw-row">
			<div class="fw-col-12">
				<p class="sc-spec-label">Bars (≡)</p>
				<button type="button" class="menu-toggle mt-693ec1a8 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-1caf3a53 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>
			</div>
		</div>
	</div>
</section>

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

Free & open source

Build with this element, free.

Install the framework and the Bootstrap 5 theme, then drag this element into any page.

Get the framework free