Priority Nav Scroller

Priority Nav Scroller is a plugin for the priority+ navigation pattern. When navigation items don’t fit on screen they are hidden and can be scrolled into view or using controls.

View demo

Installation

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

Usage

Import JS

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
  });
});

Options

Import SASS

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

Markup

<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>

Using other tags

The demos use a