grunt-autonav

Add active classes to current navigation items in static files.

Getting Started

This plugin requires Grunt ~0.4.5

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-autonav --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-autonav');

The "autonav" task

Overview

In your project's Gruntfile, add a section named autonav to the data object passed into grunt.initConfig().

grunt.initConfig({
  autonav: {
    options: {
      // Task-specific options go here.
    },
    your_target: {
      // Target-specific file lists and/or options go here.
    },
  },
});

Options

options.parent

Type: String Default value: '.navigation'

The main navigation item wrapper expressed as a usual CSS selector.

options.childtype

Type: String Default value: 'li'

Elements wrapping the navigation links.

options.activeclass

Type: String Default value: 'active'

Class to be applied on the active link's parent/childtype.

options.parentclass

Type: String Default value: 'active-parent'

Class to be applied on the active link parent's immediate parent.

options.ancestorclass

Type: String Default value: 'active-ancestor'

Class to be applied on the all the active link's childtype ancestors.

Usage Examples

Default Options

The following example constitutes of a basic navigational unordered list with the following markup structure:

<ul class="navigation">
	<li><a href="index.html">Home</a></li>
	<li>
		<a href="page.html">Page</a>
		<ul>
			<li>
				<a href="second.html">Second</a>
				<ul>
					<li><a href="child.html">Child</a></li>
					<li><a href="sibling.html">Sibling</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="blog.html">Blog</a></li>
	<li><a href="contact.html">Contact</a></li>
</ul>

Creating the task:

grunt.initConfig({
  autonav: {
    options: {},
    files: {
      'dest/default_options/child.html': ['src/child.html'],
    },
  },
});

The autonav task iterates through all the links inside the options.parent element and cross references their href attributes with the filename of the running file. When it finds a match, it proceeds to add all active classes.

On the previous markup structure the output would be:

<ul class="navigation">
	<li><a href="index.html">Home</a></li>
	<li class="active-ancestor">
		<a href="page.html">Page</a>
		<ul>
			<li class="active-parent active-ancestor">
				<a href="second.html">Second</a>
				<ul>
					<li class="active" ><a href="child.html">Child</a></li>
					<li><a href="sibling.html">Sibling</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="blog.html">Blog</a></li>
	<li><a href="contact.html">Contact</a></li>
</ul>

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Release History

(Nothing yet)