$ npm install priority-nav-scroller --save-dev

The script is an ES6(ES2015) module but the compiled version is included in the build as "src/scripts/priority-nav-scroller-umd.js". You can also copy "src/scripts/priority-nav-scroller.js" into your own site if your build process can accommodate ES6 modules.

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

// Init with default setup
const priorityNavScrollerDefault = PriorityNavScroller();

// Init with all options at default setting
const priorityNavScrollerDefault = 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',
  scrollStep: 80
});

// Init multiple nav scrollers with the same options
let navScrollers = document.querySelectorAll('.nav-scroller');

navScrollers.forEach((currentValue, currentIndex) => {
  PriorityNavScroller({
    selector: currentValue
  });
});

@import "node_modules/priority-nav-scroller/src/styles/priority-nav-scroller.scss";

<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>
      ...
    </div>
  </nav>

  <button class="nav-scroller-btn nav-scroller-btn--left">
    ...
  </button>

  <button class="nav-scroller-btn nav-scroller-btn--right">
    ...
  </button>

</div>

The demos use a <div> for "nav-scroller-content" and <a> tags for the "nav-scroller-item" but you can also use a <ul> as below.

<ul class="nav-scroller-content">
  <li class="nav-scroller-item"><a href="#" class="nav-scroller-item">Item 1</a></li>
  ...

The buttons use an svg for the arrow icon but this can be replaced with an image, text or html entities(< >, ← →, ◄ ►), just update the nav-scroller-button styles as needed.

Supports all modern browsers(Firefox, Chrome and Edge) released as of January 2018. For older browsers you may need to include polyfills for Nodelist.forEach and Element.classList.

Clone or download from Github.

$ npm install
$ gulp serve

A horizontal scrolling navigation pattern for touch and mouse with moving current indicator by Ben Frain.
A Priority+ Navigation With Scrolling and Dropdowns by Micah Miller-Eshleman on CSS-Tricks.
The Priority+ Navigation Pattern by Chris Coyier on CSS-Tricks.

MIT © Nigel O Toole