Join our HiFi mailing list to receive the latest news & updates

Navigation Menu

Overview:

This snippet is a core part of every HiFi theme.  It allows you to easily build navigation, menus, sitemaps or any feature that needs a nested list of your site content.

The idea behind the snippet is that you provide a piece of content as a starting point and a depth, and this will build a tree for you.  Typically, the starting point will be your homepage, and the depth will be 1 or 2 depending on whether you want drop downs in your navigation.

By default, this snippet generates nice and clean markup, but you can pass in other templates if you need to change that markup dramatically.  Most common things, like adding ids and classes can be done with the default templates.

Requirements:

No external requirements -- although this snippet won't do you any good if you're not on HiFi.

Instructions:

Template:

The default options will generate nested unordered lists starting from your homepage, two levels deep.  Here is how you make the default call:

{% import '/common/navigation/navigation.html' as navigation %}
{{ navigation.draw() }}

This will generate something like the following:

<ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a>
        <ul>
            <li><a href="/about/philosophy">Philosophy</a></li>
            <li><a href="/about/history">History</a></li>
            <li><a href="/about/team">Team</a></li>
        </ul>
    </li>
    <li><a target="_blank" href="http://www.yahoo.com">Yahoo</a></li>
    <li><a href="/contact">Contact</a></li>
</ul>

If you need to do something beyond the defaults, you can add in options by passing in an options object. Here is an example that changes the maxDepth to 3 and has two other fake options. It doesn't matter what order they are in.

{% import '/common/navigation/navigation.html' as navigation %}
{{ navigation.draw({
    maxDepth: 3,
    option: 'value',
    otherOption: 'value'
}) }}

Options Reference

root:

A query to find the starting point for the nav. So {type: 'page', url: '/about'} would start from the about page. It uses the first result from the query.
Default: {type: 'home'}

maxDepth:

The number of levels this should traverse.
Default: 2

childQuery:

This is the query used to restrict the items that are found. It is used at each depth level.
Default: {type: 'content', inMenu: true, orderBy: 'ordinal', count: 100}

activeClass:

The class to put on the active nav item based on url.
Default: 'active'

ancestorActiveClass:

The class to put on ancestors to the active nav item based on url.
Default: 'active'

includeParent:

If true, the root is included in the first level nav.
Default: true

includeLevelClass:

Display a level class on each li (ie. class="level_3")
Default: false

levelClassPrefix:

Specify the string you want to prefix the level number
Default: 'level_'

cssId:

The id attribute assigned to the nav's first ul
Default: ''

cssClass

The class attribute assigned to the nav's first ul
Default: ''

newWindowAttribute:

For link types that have newWindow set, what attribute do you want to add to the link.
Default: 'target="_blank"'

linkFolders:

Specify whether folder links should have the href attribute
Default: false

wrapperTemplate:

Path to the template to use for wrappers
Default: '/common/navigation/wrapper.html'

itemTemplate:

Path to the template to use for items
Default: '/common/navigation/item.html

Comments

  1. http://stdtests.us/'s avatar
    http://stdtests.us/
    | Permalink
    Thank, I was trying to find such an easy script for a month.