Need help with priority-nav-scroller?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

NigelOToole
198 Stars 11 Forks MIT License 28 Commits 4 Opened issues

Description

Priority Nav Scroller is a plugin for the priority+ navigation pattern.

Services available

!
?

Need anything else?

Contributors list

# 114,105
HTML
scrolle...
Sass
es6-mod...
24 commits

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

| 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


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.

$ npm install
$ gulp serve

Credits

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.

License

MIT © Nigel O Toole

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.