Vertical Navigation

This is a vertical navigation menu that stays available to users regardless of where they are on the page.

If the menu is taller than the viewport, it will scroll along with the page until the bottom of the navigation element - or top, if scrolling up - is within the viewport.

It also features toggleable nested sections for more complex navigational needs.

Scroll around and open some of the sections on the left to see it in action!

Usage

Include the script on your page with <script src="navigation.js"></script>. (If you put it in the head, add the defer attribute.)

Initialize the plugin with <script>navigation.init();</script>.

Settings can be passed in to the plugin like so:


					navigation.init( {
	breakpoint: 960,
	main: document.getElementById( 'main' ),
	nav: document.getElementById( 'nav' ),
} );

The available settings are as follows:

breakpoint: Pixel width at which the navigation is styled for mobile devices. Defaults to null.
main: Required. The element containing the page's content. Defaults to null.
minHeights: Whether the plugin should set minimum heights on the main and nav elements. Defaults to true.
nav: Required. The element containing the navigation. Defaults to null.
orientation: The orientation of the navigation. Accepts vertical or horizontal. Defaults to vertical.
position: Initial top value of the navigation element from CSS, if set. Defaults to 0.

Placeholder content