Off-Canvas Side Menu – Slide-Out Navigation with Hamburger Button

An accessible off-canvas menu for any WordPress theme. A hamburger button opens a slide out side menu with your navigation, an optional search form, and custom text. Use it as a mobile menu or as a compact menu for minimal designs, with no theme dependencies and no jQuery.

Features

• Own menu location: "Off-Canvas Side Menu", with a fallback setting to reuse any existing menu.
• Hamburger button three ways: a fixed button in the top left or top right corner, the [off_canvas_menu_button] shortcode, or the Side Menu Button block. The version 1 shortcode [burger_menu_icon] still works.
• Panel options: slide in from the left or right, width, background, text, and link colors (CSS variables).
• Mobile only mode: hide the button and panel from a screen width you choose.
• Accessible: dialog semantics, aria-expanded / aria-controls, focus trap, Escape and overlay click to close, focus returns to the button, body scroll lock, prefers-reduced-motion.
• Expandable submenus with real toggle buttons; the current page's section starts open.
• Search form and custom text (sanitized HTML) in the panel.
• Small footprint: one stylesheet, one vanilla script, loaded only when the menu has content.

Setup

1. Install and activate the plugin.
2. Assign a menu to Off-Canvas Side Menu under Appearance → Menus → Manage Locations, or choose a fallback menu under Appearance → Side Menu.
3. Configure the button position, side, width, colors, and mobile breakpoint under Appearance → Side Menu.

To place the button yourself, turn off "Automatic button" and use:

[off_canvas_menu_button]
[off_canvas_menu_button label="Menu" show_label="yes"]

or add the Side Menu Button block to your header template part. In PHP templates:

<?php echo do_shortcode( '[off_canvas_menu_button]' ); ?>

Styling

Colors and width are CSS custom properties on :root, so a theme can override them:

:root {
    --ocsm-bg: #0f172a;
    --ocsm-text: #f8fafc;
    --ocsm-accent: #f59e0b;
    --ocsm-width: 360px;
}

Main classes: .ocsm-toggle, .ocsm-toggle--fixed, .ocsm-panel, .ocsm-overlay, .ocsm-menu, .ocsm-sub-toggle. While open, <html> has the ocsm-is-open class.

Project structure

off-canvas-side-menu.php                         Plugin header and bootstrap
includes/class-off-canvas-side-menu.php          Menu location, button, shortcodes, block, panel output
includes/class-off-canvas-side-menu-settings.php Settings defaults and validation
includes/class-off-canvas-side-menu-admin.php    Settings screen under Appearance
assets/side-menu.css, side-menu.js               Front-end styles and behavior (no jQuery)
assets/block/                                    Side Menu Button block (block.json and editor script, no build step)
assets/admin.css, admin.js                       Settings page styles and color pickers
uninstall.php                                    Removes settings and the menu location assignment
readme.txt                                       WordPress.org readme

Upgrading from 1.x

Version 2.0.0 is a complete rewrite of "Beautiful Custom Header". It no longer depends on a theme #outer-wrap element or a main_menu location, and the fixed logo bar was removed. Assign a menu to the new location after updating. The logo and logo_scroll theme settings are left in place.

Custom development

Need a custom header, a mega menu, a menu styled to match your brand, or navigation fixes in your theme? The plugin is built and maintained by Ali Nawaz, a WordPress and WooCommerce developer. Get in touch for custom work.

License

GPLv2 or later. See LICENSE.