SideMenu

Description

SideMenu adds an off-canvas panel that slides in from the side of your site and can be opened from a block button placed in your content, templates or template parts.

Version 2.0 introduces a block-first workflow for modern WordPress sites. Create reusable SideMenu content in the editor, choose the default SideMenu content for free blocks, then place the “SideMenu Open Button” block wherever visitors should be able to open the panel.

The block workflow is ideal for block themes and Full Site Editing because the SideMenu button can live directly in a template, header, navigation area, page or post.

Key features

• SideMenu Open Button block for posts, pages, templates and template parts.
• Reusable SideMenu content managed as its own editor content type.
• Default SideMenu content selector in the editor.
• Button text and hamburger icon controls.
• Block styling support for color, typography, spacing, dimensions and borders.
• Responsive sliding panel with cover overlay and close button.
• Developer filters for default content and panel settings.

How to use the SideMenu block

1. Go to “SideMenus” in the WordPress admin and add the content you want to show in the sliding panel.
2. Add the “SideMenu Open Button” block to a post, page, template or template part.
3. Set the button text and choose whether to show a hamburger icon.
4. Choose the default SideMenu content from the editor’s SideMenu settings panel.

The free block uses one default SideMenu content item. Developers can filter the block content ID with the sidemenu_block_content_id filter.

Classic theme and classic SideMenu support

Classic SideMenu features are still available when your site uses a classic theme, or when the plugin detects existing classic SideMenu usage. This keeps existing shortcodes, widget sidebars, menu locations, mobile menu hijacks and Customizer settings working while giving block themes a cleaner setup path.

On classic themes, SideMenu loads the original Customizer-driven runtime. This provides the traditional SideMenu sidebar, menu location, shortcode, mobile menu hijack options and classic styling controls.

If you move an older site to a block theme, SideMenu checks for existing classic usage and keeps the classic runtime available when it finds classic SideMenu blocks, shortcodes, open links, widgets, menu locations or mobile menu hijack settings.

How to use the [sidemenu] shortcode

Classic shortcode support is still available when the classic runtime is active.

• Use [sidemenu] to show the default button.
• Use [sidemenu]My Button Title[/sidemenu] or [sidemenu title="My Button Title"] to show your own button text.
• Use [sidemenu class="my-class" title="Filtered SideMenu Button"] to show a button that only displays classic widgets or menu items with the specified class.

To add a class to a menu item, go to “Appearance – Menus”, open “Screen Options” and enable “CSS Classes”. To add a class to a block widget, select the block in “Appearance – Widgets”, open the “Advanced” panel and use “Additional CSS class(es)”.

How to open SideMenu from a link

To use a normal link as a SideMenu button, give it the open_sidemenu class:

<a href="#" class="open_sidemenu">Example Link</a>

To use an anchor link, set the link URL to #open_sidemenu.

For classic filtered content, add a dash and the class name to the anchor. For example, #open_sidemenu-testclass opens SideMenu and shows classic content marked with the testclass class.

Supported mobile menu hijacks

SideMenu can hijack the existing mobile menu button in a range of themes, including:

• Astra
• Auction Theme (AT10)
• Avada
• Avanam
• BeTheme
• Divi
• Genesis Block Theme
• Genesis Framework
• Inspiro
• OKAB
• Twenty Seventeen
• Twenty Twenty
• Twenty Twenty-One
• Twenty Twenty-Two
• Varia and child themes such as Rockfield