Scrollable Responsive Priority+ Navigation In Pure JavaScript – Priority Nav Scroller

Preview:

Description:

Priority Nav Scroller is a pure JavaScript plugin to create a fully responsive, arbitrarily-prioritized navigation menu following the Priority+ Navigation pattern.

The plugin automatically cuts your long navigation menu with navigation controls when there is not enough space to display the full menu items (e.g. on mobile devices).

The visitors are allowed to scroll through all the menu items with the left/right navigation arrows.

See also:

• Responsive Scrolling Navigation In JavaScript – Bungie Bar
• jQuery Arbitrarily-prioritized Responsive Navigation

How to use it:

Install the Priority Nav Scroller with NPM.

# NPM
$ npm install priority-nav-scroller  --save

Import the Priority Nav Scroller into your project.

import PriorityNavScroller from './priority-nav-scroller.js';

Create a normal navigation menu with navigation buttons on the page.

<div class="nav-scroller">
  <nav class="nav-scroller-nav">
    <div class="nav-scroller-content">
      <a href="#" class="nav-scroller-item">Item 1</a>
      <a href="#" class="nav-scroller-item">Item 2</a>
      <a href="#" class="nav-scroller-item">Item 3</a>
      <a href="#" class="nav-scroller-item">Item 4</a>
      <a href="#" class="nav-scroller-item">Item 5</a>
      ...
    </div>
  </nav>
  <button class="nav-scroller-btn nav-scroller-btn--left">
    &lt;
  </button>
  <button class="nav-scroller-btn nav-scroller-btn--right">
    &gt;
  </button>
</div>

Initialize the Priority Nav Scroller and done.

const myNav = PriorityNavScroller();

Default selectors of the Priority Nav Scroller.

const myNav = PriorityNavScroller({
      selector: '.nav-scroller',
      navSelector: '.nav-scroller-nav',
      contentSelector: '.nav-scroller-content',
      itemSelector: '.nav-scroller-item',
      buttonLeftSelector: '.nav-scroller-btn--left',
      buttonRightSelector: '.nav-scroller-btn--right'
});

Set the step size in pixels.

const myNav = PriorityNavScroller({
      scrollStep: 75
});

Changelog:

11/19/2018

• Add CSS scroll snap points option