David Smith

<p>This Plugin allows you to display and apply alternative styling to different navigation menus based on the screen size using the WordPress Navigation block.</p>
<p><a href="https://wordpress.org/plugins/getdave-responsive-navigation-block/" rel="ugc"></a> <a href="https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/getdave/responsive-navigation-block/refs/heads/trunk/.wordpress-org/blueprints/blueprint.json" rel="nofollow ugc"></a></p>
<h3> Video Walkthrough</h3>
<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/R5kzAaEsDMg?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>
<h3>Features</h3>
<ul>
<li>Two new Navigation Block (variations) for:
<ul>
<li>Mobile</li>
<li>Desktop</li>
</ul>
</li>
<li>Style your menu differently depending on screen size.</li>
<li>Use a different menu for each screen size.</li>
<li>Customize the “breakpoint” (where you switch between mobile and desktop).</li>
<li>Automatically switch editor to “mobile” preview when editing the mobile navigation.</li>
</ul>
<h3>Usage</h3>
<p>This Plugin creates two block variations from the Navigation block which will be <strong>automatically hidden/shown at the configured screensize</strong> (breakpoint):</p>
<ul>
<li>Navigation (Mobile) – will be displayed only on smaller screen sizes.</li>
<li>Navigation (Desktop) – will be displayed only on larger screen sizes.</li>
</ul>
<p>This affords the ability to <strong>independently style mobile vs desktop navigation</strong> and even allows for <strong>completely different menus</strong> to be used.</p>
<p>The Plugin should be used as follows:</p>
<ul>
<li>Install and Activate the plugin – two new block variations will be automatically registered for “Mobile” and “Desktop”.</li>
<li>Go to the Editor and remove any existing Navigation block.</li>
<li>Add the “Desktop Navigation” block – style and configure the menu for “desktop” as required.</li>
<li>Add the “Mobile Navigation” block – style and configure the menu for “mobile” as required.</li>
<li>View the front of your website and resize your browser to see the navigations swap out at the appropriate breakpoint/screensize.</li>
</ul>
<p>Alternatively you can transform the default Navigation block to either <code>Mobile</code> or <code>Desktop</code> variations via the block’s interface.</p>
<h3>Support</h3>
<p>Please see FAQs. If you still have an issue please:</p>
<ul>
<li>check <a href="https://github.com/getdave/responsive-navigation-block/issues" rel="nofollow ugc">Github for existing Issue reports</a>.</li>
<li>(if none) then file a new Issue on Github</li>
</ul>
<h3>Privacy Statement</h3>
<p>Responsive Navigation does <em>not</em>:</p>
<ul>
<li>use cookies.</li>
<li>send data to any third party.</li>
<li>include any third party resources.</li>
</ul>
<h3>Contributing</h3>
<p>Contributions to this Plugin are welcome. Please fork the Github repository and submit a PR for review.</p>
<h3>Development Setup</h3>
<p>This Plugin uses the <a href="https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/" rel="nofollow ugc">@wordpress/scripts package</a>.</p>
<ul>
<li>Check out the Github repo into the <code>wp-content/plugins</code> directory of a WordPress installation.</li>
<li><code>cd</code> into the Plugin’s directory install the dependencies with <code>npm i</code>.</li>
<li>Running <code>npm start</code> will start the <code>@wordpress/scripts</code> package in watch mode ready to compile the JavaScript on modification.</li>
<li>PHP files can be edited in the usual manner.</li>
</ul>
<h3>Testing</h3>
<p>The Plugin has e2e test coverage for the key features courtesey of @wordpress/scripts and Playwright.</p>
<p>To run the tests – in your terminal of choice:</p>
<ul>
<li><code>npm run build</code>.</li>
<li><code>npm run wp-env start</code>.</li>
<li>Run the tests: <code>npm run test:e2e</code></li>
</ul>
<h3>Releasing</h3>
<p>Releasing the Plugin to the WordPress.org Plugin repo is the prerogative of the Plugin owner (@get_dave). The process is as follows:</p>
<h4>Test the Plugin</h4>
<ul>
<li>Commit all changes to <code>trunk</code> branch.</li>
<li>Push changes to <code>trunk</code> (only) – <code>git push origin trunk</code>.</li>
<li>In Github:
<ul>
<li>Actions</li>
<li>Select the <a href="https://github.com/getdave/responsive-navigation-block/actions/workflows/build-release-zip.yml" rel="nofollow ugc"><code>Build Release Zip</code> action</a>.</li>
<li>Select the <code>Run workflow</code> dropdown and run the workflow to generate a zip file.</li>
<li>When action completes download the generated Plugin zip artifact.</li>
<li>Manually install and test the .zip.</li>
</ul>
</li>
</ul>
<h4>Deploy to WP.org</h4>
<ul>
<li>When ready to deploy.</li>
<li>Bump Plugin version and tag release – <code>npm run bump-version</code>.</li>
<li>Push trunk and tags – <code>git push origin trunk --tags</code></li>
<li>Deployment to WP.org will be handled automatically.</li>
</ul>


Responsive Navigation Block


Thanks for providing a solution to this common problem, it is very helpful


Such a needed feature, thank you!

Complete control over your navigation menus based on screen size including styles and menu items.

OnPoint Plugins

Mat Lipe

<h3>Fully automatic sidebar menus.</h3>
<p>Uses the parent/child relationship of your pages or categories to generate menus based on the current section of your site. Assign a page or category to a parent and Advanced Sidebar Menu will do the rest for you.</p>
<p>Keeps the menu clean and usable. Only related items display, so you don’t have to worry about keeping a custom menu up to date or displaying links to items that don’t belong.</p>
<p>Blocks are available to display menus where you need them. Look for the “Advanced Sidebar – Pages” block, or the “Advanced Sidebar – Categories” block. Widgets are also available for page builders or sites using classic widgets.</p>
<p><strong>Developed and Supported by <a href="https://onpointplugins.com/advanced-sidebar-menu/" rel="nofollow ugc">OnPoint Plugins</a>.</strong></p>
<h3>Documentation</h3>
<p>The official documentation for the plugin <a href="https://onpointplugins.com/advanced-sidebar-menu/" rel="nofollow ugc">may be found here</a>.</p>
<h3>Demo</h3>
<p>An interactive demonstration of the generated menu structure <a href="https://onpointplugins.com/advanced-sidebar-menu/#interactive-demo" rel="nofollow ugc">may be found here</a>.</p>
<p>You may also use the <a href="https://wordpress.org/plugins/advanced-sidebar-menu/?preview=1" rel="ugc">Live Preview</a> to use a playground site to test the plugin.</p>
<h3>How It Works</h3>
<p>When your users view a page or category, the Advanced Sidebar Menu plugin will calculate the related content based on what you have selected using the standard WordPress parent selectors.</p>
<p>The menu will be different for every page that displays the Advanced Sidebar Blocks because the menu is generated specifically to the current page.</p>
<p>Depending on “Pages” block options, the menu will display:</p>
<ul>
<li>The current page.</li>
<li>Parent page.</li>
<li>Child pages.</li>
<li>Grandparent pages.</li>
<li>Grandchild pages.</li>
<li>First level child pages related to the current item.</li>
</ul>
<p>Depending on “Categories” block options, the menu will display:</p>
<ul>
<li>The current category.</li>
<li>Parent category.</li>
<li>Child categories.</li>
<li>Grandparent categories.</li>
<li>Grandchild categories.</li>
<li>First level child categories related to the current item.</li>
</ul>
<h3>Menu Locations</h3>
<p>Blocks may be added to:</p>
<ul>
<li>Page/post content.</li>
<li>Widget areas.</li>
<li>Theme customizer.</li>
<li>Site Editor.</li>
<li>Really anywhere blocks are supported.</li>
</ul>
<p>Classic widgets are also available for areas like:</p>
<ul>
<li>Elementor.</li>
<li>Beaver Builder.</li>
<li>Sites that have classic widgets enabled.</li>
</ul>
<h3>Features</h3>
<ul>
<li>Page and Category menu Gutenberg blocks.</li>
<li>Page and Category menu widgets.</li>
<li>Option to display or not display the highest level parent page or category.</li>
<li>Option to display the menu when there is only the highest level parent.</li>
<li>Ability to order pages by (date, title, page order).</li>
<li>Exclude pages or categories by entering a comma separated list of ids.</li>
<li>Option to always display child pages or categories.</li>
<li>Option to select the levels of pages or categories to display when always display child is used.</li>
<li>Option to display or not display categories on single posts.</li>
<li>Ability to display each single post’s category in a new widget/block or in same list.</li>
</ul>
<h3>Page Menu Options</h3>
<ul>
<li>Display the highest level parent page.</li>
<li>Display menu when there is only the parent page.</li>
<li>Order pages by (date, title, page order).</li>
<li>Exclude pages.</li>
<li>Always display child Pages.</li>
<li>Levels of child pages to display when always display child pages is checked.</li>
</ul>
<h3>Category Menu Options</h3>
<ul>
<li>Display the highest level parent category.</li>
<li>Display menu when there is only the parent category.</li>
<li>Display categories on single posts.</li>
<li>Display each single post’s category in a new widget/block or in same list.</li>
<li>Exclude categories.</li>
<li>Always display child categories.</li>
<li>Levels of Categories to display when always display child categories is checked.</li>
</ul>
<h3>Included Language Translations</h3>
<ul>
<li>English (en_US).</li>
<li>French (fr_FR).</li>
<li>German (de_DE).</li>
<li>Spanish (es_ES).</li>
</ul>
<h3>Developers</h3>
<p>Developer docs <a href="https://onpointplugins.com/advanced-sidebar-menu/developer-docs/" rel="nofollow ugc">may be found here</a>.</p>
<h3>Contribute</h3>
<p>Send pull requests via <a href="https://github.com/lipemat/advanced-sidebar-menu" rel="nofollow ugc">GitHub Repo</a></p>
<h3>Go PRO</h3>
<p>Our <a href="https://onpointplugins.com/product/advanced-sidebar-menu-pro/?utm_source=readme&utm_campaign=gopro&utm_medium=dot-org" rel="nofollow ugc">PRO version</a> brings additional functionality to this plugin. Check out <a href="https://onpointplugins.com/advanced-sidebar-menu/advanced-sidebar-pro-demo/?utm_source=readme&utm_campaign=demo&utm_medium=dot-org" rel="nofollow ugc">the demo</a> to see if the PRO version is useful for you.</p>
<ul>
<li>Navigation menu widget.</li>
<li>Navigation menu Gutenberg block.</li>
<li>Ability to customize each page or navigation menu item link’s text.</li>
<li>Click-and-drag styling for page, category, and navigation menus.</li>
<li>Styling options for links including color, background color, size, hover, and font weight.</li>
<li>Styling options for different levels of links.</li>
<li>Styling options for the current page or category.</li>
<li>Styling options for the parent of the current page or category.</li>
<li>Blocked styling options including borders, border width, and border colors.</li>
<li>Option to choose from 7 bullet styles or no bullets.</li>
<li>Accordion menu support for pages, categories, and navigation menus.</li>
<li>Accordion icon style and color selection.</li>
<li>Accordion option to keep all sections closed until clicked.</li>
<li>Accordion option to include highest level parent in accordion.</li>
<li>Accordion option to use links for open/close.</li>
<li>Ability to exclude a page from all menus using a simple checkbox.</li>
<li>Link ordering for the category menus.</li>
<li>Number of levels of pages to show when “always display child pages” is not checked.</li>
<li>Ability to select and display custom post types.</li>
<li>Ability to select and display custom taxonomies.</li>
<li>Ability to display category post counts.</li>
<li>Exclude pages or categories using intuitive search and select. <strong>NEW</strong></li>
<li>Option to display only the current page’s parents, grandparents, and children.</li>
<li>Option to display child page siblings when on a child page (with or without grandchildren available).</li>
<li>Ability to display the menu everywhere the widget area is used (including homepage if applicable).</li>
<li>Ability to select the highest level parent page/category.</li>
<li>Ability to select which levels of categories assigned posts will display under.</li>
<li>Ability to display assigned posts or custom post types under categories or taxonomies.</li>
<li>Ability to limit the number of posts or custom post types to display under categories.</li>
<li>Support for custom navigation menus from Appearance -> Menus.</li>
<li>Ability to display the current navigation menu item’s parents and children only.</li>
<li>Option to display the top-level navigation menu items when there are no child items or not viewing a menu item.</li>
<li>Priority support with access to members only support area.</li>
</ul>


Responsive Navigation Block vs Advanced Sidebar Menu