1. Home
2. Examples
3. Active Navigation Item

Active Navigation Item

The active navigation item is a highlighted first level link in the main navigation that represents either the current page, or a parent of the current page.

By default, the active item is automatically determined by the location of a file in the folder structure of the site. For example, if a page has the url http://example.com/sample/page.html, then the navigation item linking to http://example.com/sample/, which is the main page of the sub-folder (and the parent page), will be highlighted.

This default behavior can be disabled by removing the class auto-highlight from the main navigation element <nav id="navigation" class="main-navigation ... auto-highlight" >

Setting the Active Navigation Item Manually

The active link in the main navigation can be set manually on a page by page basis by adding a bit of javascript that overrides the defaultActiveLink variable.

Add the following snippet of javascript to the head of the page. When this variable is present, it will override the automatic setting described above.

Example:

<script type="text/javascript">
  var defaultActiveLink = "Examples";
</script>

NOTE: This example finds the link with the text "Services" and set it as the active item (as seen on this page).