Priority Navigation
A JQuery plugin for creating arbitrarily-prioritized responsive navigation menus
It’s become generally accepted that hiding menus by default, behind a hamburger icon for instance, can dampen discoverability and therefor engagement. Priority Navigation is a take on the Priority+ Navigation pattern.
In his article Obvious Always Wins, Luke Wroblewski warns of the dangers of sweeping links and actions under the rug. It’s challenging to find the room to expose important actions on constrained mobile screen sizes, but it’s necessary for designers to do so.
The main feature that sets Priority Navigation apart from other examples, is that it allows for prioritization ordering independent from menu ordering. Menu item prioritization is managed by applying data-attributes to the elements.
The HTML
<ul class="toPrioritize">
<li data-priority="0">
<a href="#">Priority Navigation Demo</a>
</li>
<li data-priority="1">
<a href="#">Priority 1</a>
</li>
<li data-priority="2">
<a href="#">Priority 2</a>
</li>
<li data-priority="4">
<a href="#">Priority 4a</a>
</li>
<li data-priority="4">
<a href="#">Priority 4b</a>
</li>
<li data-priority="3">
<a href="#">Priority 3</a>
</li>
<li data-priority="5">
<a href="#">Priority 5</a>
</li>
</ul>
Items are demoted (both hidden from view and given the class demoted) in descending order, starting with the highest data-priority value set, in this example "Priority 5" has a data-priority value of 5.
Items with the same data-priority value are demoted simultaneously, given you the option of connecting particular elements as sets, this this example "Priority 4a" and "Priority 4b" both have a data-priority value of 4.
You may optionally include elements with a data-priority value of 0. These items are hidden from closed view, even if the menu has not been truncated. The original intention of this feature was to allow the display of a link to the site homepage as part of an opened menu, as a supplement to a link provided elsewhere. In this example "Priority Navigation Demo" is only visible if the menu is opened, but is also accessible by clicking the logo (∞).
The CSS
Include src/priority-navigation.css or its content in your own stylesheet.
The default styling displays the menu items as inline-block, which lets you align it as normal text. However, this example includes additional styling to display the menu as a table which allows to fully-justify the menu.
The JavaScript
Include jQuery and src/priority-navigation.min.js or its content in your own javascript. An un-minified version is available for your review.
$(".toPrioritize").prioritize();
$(".toPrioritize").prioritize({
more: "More", //default: More…
less: "Less", //default: Less…
menu: "Navigation" //default: Menu
});