/grunt-assemble-navigation

Assemble plugin for automatically generating Bootstrap-style side navigation.

Primary LanguageJavaScriptMIT LicenseMIT

grunt-assemble-navigation NPM version

Assemble navigation plugin. Automatically generate Bootstrap-style, multi-level side nav. See the sidenav on assemble.io for a demonstration.

Here's a preview

image


Quickstart

Install with npm

$ npm i grunt-assemble-navigation --save

Usage

Register the middleware with Assemble:

options: {
  plugins: ['grunt-assemble-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 -->
</div>

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>
      </ul>
    </li>
  </ul>
</div>

Other grunt-assemble middleware

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.

Authors

Jon Schlinkert

License

Copyright © 2015 Jon Schlinkert Released under the MIT license.


This file was generated by verb-cli on September 25, 2015.