Skip to main content

Menu Toggle

A hamburger button that opens an off-canvas drawer — typically used for mobile navigation. Options live under the Content and Advanced tabs.

Menu Toggle on the Page Builder canvas
💡 Web dev tip: the hamburger button needs state

That ☰ toggle must be a real <button> with an accessible name ("Menu") and aria-expanded="true"/"false" so screen-reader users know whether the menu is open. An icon alone, or a non-button <div>, leaves them guessing. MDN: aria-expanded

Live demo​

▶ See the Menu Toggle live on the demos site — an interactive example you can click through.

Content​

Menu Toggle options panel — Content tab
  • Target Drawer ID — the id of the off-canvas drawer to open; defaults to primary-navigation-drawer. Leave the default to use the theme's built-in drawer.
  • Accessible Label — screen-reader label for the button; defaults to Menu.
  • Icon Style — Bars (≡) (default) or Dots (⋮).

Advanced​

Custom CSS class/ID, responsive visibility toggles, custom attributes, and margin/padding.