Responsive Nav

Responsive navigation for desktop and mobile devices. On larger devices, menu is expanded and fully visible. On smaller devices, menu is collapsed and can be toggled open and closed. The mobile menu will also scroll vertically as necessary.

Usage

See /demo/simple folder for a working demo.

HTML structure

The .responsive-nav-scroll wrapper is unnecessary if scroll is disabled.

<nav>
    <div class="responsive-nav-scroll">
    	<div>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
            <a href="#" class="close">Close</a>
        </div>
    </div>
</nav>
 
<a href="#" class="toggle">Menu toggle</a>
<script src="responsive-nav.js"></script>

Javascript

The ResponsiveNav class accepts two arguments: a DOM element containing the menu (required) and a config object (optional).

//Config
var config = {
    scrollElement: document.querySelector('nav .scroll')
 }

//Responsive Nav class
var menu = new ResponsiveNav(document.querySelector('nav'), {});

CSS

@import 'src/responsive-nav';

@include responsive-nav-condensed();

Optionally, a pre-compiled CSS document is available: ./dist/responsive-nav.css.

Options

collapseQuery

Query used to determine if collapsed or expanded menu will be used.

Default: only screen and (min-width: 640px)

classPrefix

Prefix used on all css classes; can be changed to prevent name collision. If this is updated, the responsive-nav-condensed mixin accepts the same argument.

Default: responsive-nav-

scroll

In condensed (mobile) mode, the menu will scroll vertically as necessary.

Default: true