https://github.com/gijsroge/priority-navigation
Javascript implementation for Priority+ Navigation — no dependencies
https://github.com/gijsroge/priority-navigation
navigation priority responsive
Last synced: about 1 month ago
JSON representation
Javascript implementation for Priority+ Navigation — no dependencies
- Host: GitHub
- URL: https://github.com/gijsroge/priority-navigation
- Owner: gijsroge
- License: mit
- Created: 2015-05-05T08:18:54.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2022-05-25T23:33:07.000Z (about 3 years ago)
- Last Synced: 2025-05-10T01:04:17.778Z (about 2 months ago)
- Topics: navigation, priority, responsive
- Language: JavaScript
- Homepage: http://gijsroge.github.io/priority-nav.js/
- Size: 220 KB
- Stars: 769
- Watchers: 21
- Forks: 108
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://github.com/gijsroge/vue-responsive-menu)**.
----------
#### Take a look at the **[Demo](http://gijsroge.github.io/priority-nav.js/)** 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
```html
```
Call plugin without any options.
```js
var nav = priorityNav.init();
```
Ideal html structure
```html
- <- needs to be inline-block
- menu item
- menu item
- menu item
- menu item
```
### Options
```js
initClass: "js-priorityNav", // Class that will be printed on html element to allow conditional css styling.
mainNavWrapper: "nav", // mainnav wrapper selector (must be direct parent from mainNav)
mainNav: "ul", // mainnav selector. (must be inline-block)
navDropdownClassName: "nav__dropdown", // class used for the dropdown - this is a class name, not a selector.
navDropdownToggleClassName: "nav__dropdown-toggle", // class used for the dropdown toggle - this is a class name, not a selector.
navDropdownLabel: "more", // Text that is used for the dropdown toggle.
navDropdownBreakpointLabel: "menu", //button label for navDropdownToggle when the breakPoint is reached.
breakPoint: 500, //amount of pixels when all menu items should be moved to dropdown to simulate a mobile menu
throttleDelay: 50, // this will throttle the calculating logic on resize because i'm a responsible dev.
offsetPixels: 0, // increase to decrease the time it takes to move an item.
count: true, // prints the amount of items are moved to the attribute data-count to style with css counter.
//Callbacks
moved: function () {}, // executed when item is moved to dropdown
movedBack: function () {} // executed when item is moved back to main menu
```
### 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](https://github.com/remy/polyfills/blob/master/classList.js/) must be added your page.
```html
```
### IE8 Support
To support Internet Explorer 8, [es5-shim](https://github.com/kriskowal/es5-shim/) and classList.js from above must be added your page.
```html
```
### 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)