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.

Default

Inline controls

Scroll snap (Uses CSS Scroll snap points)

Inline element

Align right

Navigation items expand to fill the available space

Grouped navigation items

Installation

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

Usage

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

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

Property Default Type Description
selector '.nav-scroller' String/Node Container element selector.
navSelector '.nav-scroller-nav' String Item element selector.
contentSelector '.nav-scroller-content' String Content element selector.
itemSelector '.nav-scroller-item' String Item element selector.
buttonLeftSelector '.nav-scroller-btn--left' String Left button element selector.
buttonRightSelector '.nav-scroller-btn--right' String Right button element selector.
scrollStep 80 Number/String Amount to scroll on button click. 'average' gets the average link width.

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" aria-label="Scroll left">
    ...
  </button>

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

</div>

Using other tags

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.

Compatibility

Browser support

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.

Demo site

Clone or download from Github.

$ npm install
$ gulp serve