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.
$ 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.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: 75
});
// Init multiple nav scrollers with the same options
let navScrollers = document.querySelectorAll('.nav-scroller');
navScrollers.forEach((currentValue, currentIndex) => {
PriorityNavScroller({
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>
...
</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.
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";
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