Priority Nav Scroller

Priority Nav Scroller is a plugin for the priority+ navigation pattern. When the navigation items don’t fit on screen they are hidden in a horizontal scrollable container with controls.


Large amount of links

Small amount of links with a logo

Inline controls

Expand the nav to fill the space available

Align the nav right


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


The script is an ES6(ES2015) module but a compiled version is included in the build as index.js. You can also copy scripts/priority-nav-scroller.js into your own site if your build process can accomodate ES6 modules. Babel and Browserify are used in the demo site.

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

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

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


selector {string || DOM node}
Element selector.

navSelector {string}
Nav element selector.

navSelector {string}
Nav element selector.

contentSelector {string}
Content element selector.

itemSelector {string}
Items selector.

buttonLeftSelector {string}
Left button selector.

buttonRightSelector {string}
Right button selector.

scrollStep {integer || string}
Amount to scroll on button click. 'average' gets the average link width.


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

  <button class="nav-scroller-btn nav-scroller-btn--left" aria-label="Scroll left">

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


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.


Import the styles into your project directly from the node_modules as below or copy the styles into your own project, you will need styles/priority-nav-scroller.scss. There is also a compiled CSS file you can use, styles/priority-nav-scroller.css.

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

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


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.