Injects a sliding side menu / sidebar into any theme!

Sidebar Nav

Adds a widget that will automatically display a list of the page’s sibling pages (the other child pages under the same parent page).

Oliver Campion

<h4>SideMenu</h4>
<p>This plugin works really well with new FSE (Full Site Editing) themes such as Twenty Twenty-Two. Check out the menu in the <a href="https://ryesussex.uk" title="Rye" rel="nofollow ugc">Rye</a> website for an example real-world use of this lightweight plugin!</p>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/p4L5DzNPC3g?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<p>This plugin will inject a responsive SideMenu sidebar and menu location into your theme that you can add widgets to.</p>
<p>The SideMenu is opened by clicking on a menu button that you can add to any menu in your site.</p>
<p>When the SideMenu slides open, the entire site is dimmed and slid to the left.</p>
<p>The SideMenu is closed by either clicking the close icon at the top right of the SideMenu, clicking on the dimmed site or by scrolling down.</p>
<p>This plugin can also hijack the existing mobile menu button within your theme if required. Themes that already work with this feature are …</p>
<ul>
<li>Astra</li>
<li>Auction Theme (AT10)</li>
<li>Avada</li>
<li>Avanam</li>
<li>BeTheme</li>
<li>Divi</li>
<li>Genesis Block Theme</li>
<li>Genesis Framework</li>
<li>Inspiro</li>
<li>OKAB</li>
<li>Twenty Seventeen</li>
<li>Twenty Twenty</li>
<li>Twenty Twenty-One</li>
<li>Twenty Twenty-Two</li>
<li>Varia (and child themes like Rockfield)</li>
</ul>
<p>… ask us in the <a href="https://wordpress.org/support/plugin/sidemenu/" title="SideMenu Support Forum" rel="ugc">SideMenu Support Forum</a> to add your theme!</p>
<p>You can also enable a “Mega Menu” style dropdown menu feature.</p>
<h4>How to use the SideMenu block</h4>
<p>The SideMenu block to show the button to open the SideMenu. The optional title attribute is the text that is shown on the button.</p>
<p>Please note that for the meantime, all options are still found in “Customizer – SideMenu”.</p>
<h4>How to use the [sidemenu] shortcode</h4>
<ul>
<li>Use [sidemenu] to just show the default button</li>
<li>Use [sidemenu]My Button Title[/sidemenu] or [sidemenu title=”My Button Title”] to show the button with your own text</li>
<li>Use [sidemenu class=”my-class” title=”Filtered SideMenu Button”] to show a button which only shows widgets or menu items with the specified class</li>
</ul>
<p>To add a class to a menu item in “Dashboard – Appearance – Menus” click “Screen Options in the top right hand corner of the screen and tick “CSS Classes”. The menu items will then show a “CSS Classes” field when expanded.</p>
<p>To see the class of a widget in “Dashboard – Appearance – Widgets”, expand the widget that you’ve added to the SideMenu widget area and the class name is shown at the bottom. Since WordPress v5.8 with the new Block Widget Editor, it’s super easy to set a custom CSS class for each block, just select the block and in the block options on the right, scroll to the bottom and expand “Advanced” where you can add them into “Additional CSS class(es)”.</p>
<p>This video will help to explain how to use classes to control the content of the widget …</p>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/or5jVYgMoQE?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<p>To use a link as a button to open the SideMenu, set the class attribute of the link to be “open_sidemenu” <code><a href="#" class="open_sidemenu">Example Link</a></code>. You can add classes to the element to control what content is shown as with the shortcode.</p>
<p>To use an anchor link to open the sidemenu, set the link to be “#open_sidemenu”. This doesn’t require a class to be set. To control what content is shown, add a dash and the class of the element(s) to be shown, for example “#open_sidemenu-testclass”.</p>


SideMenu

Hi

Installed the free version and within minutes bought the upgrade. I didn't need to the free version worked for me just fine but for £5.99 the cost is worth it and of course I am supporting the developer.

I love that this menu enables me to remove the sidebar and have a full width content site. It is easy to use and makes navigating the site simple.

Thanks.

Alternatives to SideMenu

Top alternatives