benknight

<p>This is a simple plugin that was born out of working on several projects with sectional navigations.  For example, consider the following common navigation tree structure:</p>
<ul>
<li>Home</li>
<li>Item</li>
<li>About Us
<ul>
<li>Sub-item #1</li>
<li>Sub-item #2</li>
</ul>
</li>
<li>Item</li>
<li>Item</li>
</ul>
<p>Then, whenever on the “About Us” page or any of its sub-items, it would output that peice of the navigation:</p>
<ul>
<li>About Us
<ul>
<li>Sub-item #1</li>
<li>Sub-item #2</li>
</ul>
</li>
</ul>
<p>This is particularly useful for websites that have a top horizontal navigation which shows top-level items and want to show a vertical subnavigation in the sidebar.</p>
<p>This plugin works by parsing the output of the <code>wp_nav_menu</code> function as XML and analyzing the CSS class hooks (current-menu-ancestor, current-menu-item, and current-menu-parent).  Because it uses PHP’s SimpleXML library it therefore requires PHP 5+.  It uses the theme’s registered menu locations.</p>
<p>This plugin also exposes the <code>section_subnav()</code> function for theme developers to use as a template tag to manually place a subnav inside the theme.  Here is the usage:</p>
<pre><code><?php

    section_subnav( array( // defaults
        'before_widget' => '<nav id="section-subnav" class="widget widget_section-subnav">',
        'after_widget' => "</nav>",
        'before_title' => '<h3 class="section-subnav-title widget-title">',
        'after_title' => '</h3>',
        'echo' => true
    ));

?>
</code></pre>
<p>It returns false when there is no subnavigation.</p>
<p>This function also provides the <code>section_subnav_args</code> filter hook for writing less code and easier integration with other plugins and child themes.</p>


Section Subnav

Adds a widget and template function for displaying subnavigation based on the current navigation state.

Themeisle

WPShout

<p>This plugin gives you the ability to add icons to your menu items, similar to the look of the latest dashboard menu.</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/YcSotWXIczI?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>
<h4>Usage</h4>
<ol>
<li>After the plugin is activated, go to <em>Appearance</em> > <em>Menus</em> to edit your menus</li>
<li>Enable/Disable icon types in “Menu Icons Settings” meta box</li>
<li>Set default settings for current nav menu; these settings will be inherited by the newly added menu items</li>
<li>Select icon by clicking on the “Select icon” link</li>
<li>Save the menu</li>
</ol>
<h4>Supported icon types</h4>
<ul>
<li>Dashicons (WordPress core icons)</li>
<li><a href="http://shoestrap.org/downloads/elusive-icons-webfont/" rel="nofollow ugc">Elusive Icons</a> by <a href="http://shoestrap.org/blog/author/aristath/" rel="nofollow ugc">Aristeides Stathopoulos</a></li>
<li><a href="http://fontawesome.io/" rel="nofollow ugc">Font Awesome</a> by <a href="http://twitter.com/davegandy" rel="nofollow ugc">Dave Gandy</a></li>
<li><a href="http://zurb.com/playground/foundation-icon-fonts-3/" rel="nofollow ugc">Foundation Icons</a> by <a href="http://zurb.com/" rel="nofollow ugc">Zurb</a></li>
<li><a href="http://genericons.com/" rel="nofollow ugc">Genericons</a> by <a href="http://automattic.com/" rel="nofollow ugc">Automattic</a></li>
<li><a href="http://fontello.com/" rel="nofollow ugc">Fontello</a> icon packs</li>
<li><a href="http://themeisle.com/free-icons/" rel="nofollow ugc">TI Icons</a> icon pack by <a href="http://twitter.com/themeisle" rel="nofollow ugc">ThemeIsle</a></li>
<li>Image (attachments)</li>
<li>SVG (attachments)</li>
</ul>
<h4>Planned supported icon types</h4>
<ul>
<li>Image (URL)</li>
</ul>
<h4>Compatible themes</h4>
<p>Menu icons works with most of the themes out there, especially with popular ones like Twenty Seventeen or <a href="https://themeisle.com/themes/hestia/" rel="nofollow ugc">Hestia</a>.</p>
<p>Development of this plugin is done on <a href="https://github.com/codeinwp/wp-menu-icons" rel="nofollow ugc">GitHub</a>. <strong>Pull requests welcome</strong>. Please see <a href="https://github.com/codeinwp/wp-menu-icons/issues" rel="nofollow ugc">issues reported</a> there before going to the plugin forum.</p>
<h3>If you like this plugin, then consider checking out our other projects:</h3>
<p><a href="https://www.codeinwp.com/blog/" rel="nofollow ugc">CodeinWP Blog</a> – Designer’s Guide To WordPress<br />
<a href="https://revive.social" rel="nofollow ugc">Revive.Social</a> – Social Media Tools<br />
<a href="https://justfreethemes.com" rel="nofollow ugc">JustFreeThemes</a> – Free WordPress Themes directory</p>


Menu Icons by Themeisle – Add Icons to Navigation Menus

Add icons to WordPress navigation menus easily — pick from Font Awesome, Dashicons, image icons & more. Style menu items with custom colors & sizes.

Section Subnav vs Menu Icons by Themeisle – Add Icons to Navigation Menus