Priority+ Navigation

Mobile navigation is often treated as show / hide only. Usability tests suggest that user experience can be improved by using a priority menu. NavPriority plugin adjust wide navigation to fit the viewport of any device.

Responsive menu with many items is very challenging to design and code. Priority+ pattern solves problems with much needed space when you really care about multi device usability. If you want to know more about priority+ patterns, let us recommend you great article Revisiting the priority pattern by Brad Frost.

PriorityNav plugin checks available space and rearranges menu accordingly. When there is not enough space, overflowing items are stored in dropdown menu labelled “More”. Plugin lets you customize a few options, so it suits your needs.

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="collapsed navbar-toggle" data-toggle="collapse" data-target="#sw-example-navbar" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">BBC</a> </div>
        <div class="collapse navbar-collapse" id="sw-example-navbar" data-nav="priority">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">UK</a></li>
                <li><a href="#">World</a></li>
                <li><a href="#">Sport</a></li>
                <li><a href="#">Opinion</a></li>
                <li><a href="#">Culture</a></li>
                <li><a href="#">Business</a></li>
                <li><a href="#">Lifestyle</a></li>
                <li><a href="#">Fashion</a></li>
                <li><a href="#">Environment</a></li>
                <li><a href="#">Tech</a></li>
                <li><a href="#">Travel</a></li>
            </ul>
        </div>
    </div>
</nav>

NavPriority does have just one requirement, it has to be simple <ul> list wrapped in a resizable container. The plugin is initialized by calling window.navPriority('[data-nav="priority-1"]') with DOM selector as first argument and optional parameters as second argment.

window.navPriority('[data-nav="priority-1"]')

NavPriority plugin is not dependant on any framework, however, if you want to used it with your own styles, make sure the navigation container is resizable.

<nav class="sw-example-menu" data-nav="priority-2">
  <ul>
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">UK</a></li>
      <li><a href="#">World</a></li>
      <li><a href="#">Sport</a></li>
      <li><a href="#">Opinion</a></li>
      <li><a href="#">Culture</a></li>
      <li><a href="#">Business</a></li>
      <li><a href="#">Lifestyle</a></li>
      <li><a href="#">Fashion</a></li>
      <li><a href="#">Environment</a></li>
      <li><a href="#">Tech</a></li>
      <li><a href="#">Travel</a></li>
  </ul>
</nav>

Responsivity

In case you want to use different navigation types for different screen sizes, f.e. mobile vs. desktop, you can use small utility BreakpointSwitcher to turn priority nav on / off.

Example implementation used in this demo:

var bs = BreakpointSwitcher.create({
  '768px': function(enter) {
    if (enter) {
      window.navPriority('[data-nav="priority-1"]', {
        containerSelector: null,
        containerWidthOffset: 70,
      });

      window.navPriority('[data-nav="priority-2"]')
    }
    else {
      window.navPriority('[data-nav="priority-1"]', 'destroy');
      window.navPriority('[data-nav="priority-2"]', 'destroy');
    }
  }
});

You need to specify breakpoint, when the navigation is supposed to be enabled or disabled. When the view meets the condition, the navigation is enabled. BreakpointSwitcher uses window.matchMedia to test the viewport. You can use px or em based breakpoints.

Plugin Options

This table gives you a quick overview of NavPriority options.

Name	Default	Usage
dropdownLabel	`'More '`	Change label of the menu to your context.
dropdownMenuClass	`'dropdown-menu dropdown-menu-right'`	Classes for custom styling of the dropdown menu.
dropdownMenuTemplate	see the source	You can change code of the dropdown menu, but it is not recommended.
containerWidthOffset	`70`	Offset is substracted from container width.

Bootstrap Priority Navbar

Custom Priority Navbar

Responsivity

Plugin Options