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.

ulfben

<p>This plugin provides <a href="http://www.destroydrop.com/javascripts/tree/" rel="nofollow ugc">dynamic navigation trees</a> to replace the standard archives, categories, pages and link lists. They’re widgets so you can setup the awesome tree navigation with drag & drop ease, but it also exposes several <a href="https://wordpress.org/plugins/wp-dtree-30/installation/" rel="ugc">new template tags</a> for developers.</p>
<p>//<em><a href="http://www.ulfbenjaminsson.com" rel="nofollow ugc">Ulf Benjaminsson</a></em></p>
<h4>Changes in v4.4.5 (2019-03-25)</h4>
<ul>
<li>Fixed translation regression.</li>
</ul>
<h4>Changes in v4.4.4 (2019-03-24)</h4>
<ul>
<li>Updated <a href="https://wordpress.org/support/topic/support-for-php-704/?replies=2" rel="ugc">for PHP 7</a></li>
<li><a href="https://wordpress.org/support/topic/links-prepending-with-name-of-site/?replies=3" rel="ugc">Fixed https support</a> for links in the Links-widget</li>
<li>Added support to <a href="https://wordpress.org/support/topic/include-parent-page-in-tree-hierarchy/?replies=7" rel="ugc">always include parent page in hierarchy</a> when selecting child ID’s.</li>
</ul>
<h4>Changes in v4.4.3.1 (2015-03-20)</h4>
<ul>
<li>Added support for category-specific archives</li>
<li>Added support to use description instead of name for taxonomy trees.</li>
<li>Fixed the sort ordering of archives</li>
<li>Fixed potential “duplicate entry”-mysql error</li>
<li>Removed forgotten debug-call.</li>
</ul>
<h4>Changes in v4.4.2 (2015-01-03)</h4>
<ul>
<li>Better sorting options for posts</li>
<li>Archives now support Custom Post Types</li>
<li>Support for <a href="https://wordpress.org/support/topic/wp-dtree-update?replies=1#post-4583198" rel="ugc">Post Types Order</a> (thank you, sydcode)</li>
<li>Minor bug fixes</li>
</ul>
<h4>Changes in v4.4 (2014-12-22)</h4>
<ul>
<li>Added support for WordPress’ Menus.</li>
<li>Added multisite support. (thanks, John Pariseau)</li>
<li>Added option to set navigation root to the current page or category. </li>
<li>Fixed broken l10n.</li>
<li>Fixed a XSS vulnerability. (thanks, Patrick Riggs)</li>
<li>Replaced all deprecated functions.</li>
<li>Fixed tons of PHP warnings and notices.</li>
</ul>
<h4>Changes in v4.3.1 (2012-01-11)</h4>
<ul>
<li>Fixed: uninitialized settings will not cause <a href="https://wordpress.org/support/topic/plugin-wp-dtree-works-but-has-bugs?replies=3" rel="ugc">wierd output</a>.</li>
</ul>
<p><a href="https://wordpress.org/extend/plugins/wp-dtree-30/changelog/" rel="ugc">Older changelogs moved here</a>.</p>
<h3>Additional Info</h3>
<p>The original ‘WP-dTree’ was created by <a href="http://www.silpstream.com/blog/" rel="nofollow ugc">Christopher Hwang</a> in ~2005. By 2007 Mr. Hwang seemed to have dropped of the internet for good so <a href="http://www.ulfbenjaminsson.com/" rel="nofollow ugc">Ulf Benjaminsson</a> forked the plugin in and named it ‘WP-dTree 3.0’ (note to self: having a release number in the title was <em>stupid</em>).</p>
<p>The fork was focused on performance improvements – mainly caching – but soon expanded to add a lot of new features and modernizations; compatibility with WP 2.7 through WP 3.3, widgets, out-of-the-box Scriptaculous support, link trees, feed icons and more.</p>
<p>For version 4.0 the entire plugin has been rewritten from scratch by Ulf, bringing it in line with the much matured WP 3.x API.</p>
<p>*WP-dTree (3.0 and up) is Copyright (C) 2007-2021 Ulf Benjaminsson (email: hello at my full name dot com)</p>
<p>*WP-dTree (3.x and lower) Copyright (C) 2006 Christopher Hwang (email: chris at silpstream dot com).</p>
<p>*<a href="http://www.destroydrop.com/javascripts/tree/" rel="nofollow ugc">dTree</a>-JavaScript is Copyright (c) 2002-2003 Geir Landrö</p>
<p>This program is free software; you can redistribute it and/or modify<br />
it under the terms of the GNU General Public License as published by<br />
the Free Software Foundation; either version 2 of the License, or<br />
(at your option) any later version.</p>
<p>This program is distributed in the hope that it will be useful,<br />
but WITHOUT ANY WARRANTY; without even the implied warranty of<br />
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the<br />
GNU General Public License for more details.</p>
<p>You should have received a copy of the GNU General Public License<br />
along with this program; if not, write to the Free Software<br />
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA</p>


WP-dTree

Dynamic tree-widgets to replace the standard archives, categories, pages and link lists. Support custom Menus too.

Responsive Navigation Block vs WP-dTree