node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


assemble-contrib-navigation NPM version

Assemble plugin to automatically generate Bootstrap-style, multi-level side navigation. See the sidenav on for a demonstration.

Heads up! v0.1.0 and greater requires Assemble v0.5.0!

Get the Assemble generator for Yeoman to kickstart new Assemble projects using this plugin.

Here's a preview



Install with npm:

npm i assemble-contrib-navigation --save-dev


Register the plugin with Assemble:

options: {
  plugins: ['assemble-contrib-navigation', 'foo/*.js']

Visit the plugins docs for more info or for help getting started.

Add this markup where you want the navigation:

<div id="navigation">
  <!-- navigation -->

The plugin uses page headings to construct the nav items, results in something like:

<div id="navigation">
  <!-- navigation -->
  <ul class="nav sidenav">
    <li><a href="#collections">Collections</a>
      <ul class="nav">
        <li> <a href="#collections-after">{{after}}</a> </li>
        <li> <a href="#collections-any">{{any}}</a> </li>
        <li> <a href="#collections-before">{{before}}</a> </li>

Assemble plugins

Here are some related projects you might be interested in from the Assemble core team.

Visit for more information about Assemble plugins.


Find a bug? Have a feature request? Please create an Issue.

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality, and run docs in the command line to build the docs with Verb.

Pull requests are also encouraged, and if you find this project useful please consider "starring" it to show your support! Thanks!


Jon Schlinkert


Copyright (c) 2014 Jon Schlinkert, contributors.
Released under the MIT license

This file was generated by verb-cli on May 01, 2014.