priority-navigation

PriorityNavigation.js

PriorityNav is a pure javascript plugin that will move your menu items if they don't fit its parent.

Vue.js version here.

Take a look at the Demo site.

Features

• Accessible Adds appropriate aria attributes and set focus to links when needed.
• No dependencies The plugin is written in pure javascript making it fast and lean.
• Breakpoint When the breakpoint has been reached the plugin will automaticly move all items to the dropdown & change the toggle label to navDropdownBreakpointLabel.
• Smart calculation of available space It automatically looks for the main navigation's siblings and calculates remaining space.
• Flexible Because of the point above you can have multiple inline-block/flexbox items on the same level.
• Non obstructive menu dropdown The dropdown menu can be closed by clicking outside and pressing escape.
• Callbacks Callbacks are fired when an item is moved or moved back from the main navigation.

Usage

Load plugin files

Call plugin without any options.

var nav = priorityNav.init();

Ideal html structure

Options

…

Package managers

• npm: npm install --save priority-nav
• bower: bower install priority-nav.js

Building the source files

#cloning repository
git clone https://github.com/gijsroge/priority-navigation.git
cd priority-navigation

#dependencies
npm install

#build files to dist folder
grunt build

IE9 Support

To support Internet Explorer 9 and lower classList.js must be added your page.

IE8 Support

To support Internet Explorer 8, es5-shim and classList.js from above must be added your page.

Alternatives

• https://github.com/lewie6/ng-priority-nav (angular)
• https://github.com/matthornsby/priority-navigation (jQuery)
• https://github.com/352Media/flexMenu (jQuery)
• https://github.com/VPenkov/okayNav (jQuery)
• https://github.com/VPenkov/okayNav-vanillaJS (no dependencies)
• https://github.com/skywalkapps/nav-priority (no dependencies)