Skip to content
Jeff Ausura edited this page Jun 3, 2016 · 4 revisions

There are two ways to build you navigation with Navee. The simple method, and the custom method.

Simple - craft.navee.nav()

The simple method will hand rolling most the html for you. It assumes you are building your navigation using nested unordered lists and will apply active classes for you as necessary.

Your simple navigation can be customized by passing any of the available parameters.

Description

craft.navee.nav( string $navigationHandle, array $config)

This tag returns a string containing a fully formatted navigation using nested unordered lists.

Parameters

navigationHandle

The handle for the navigation you would like to generate.

config

An array of config parameters to customize the output of your navigation.

Examples

VERY simple
{{ craft.navee.nav('mainNavigation') }}
Still simple, but with parameters
{% set navConfig = {
    'startwithActive' : true,
    'maxDepth' : 2,
    'activeClassOnAncestors' : true,
    'ancestorActiveClass' : 'activeAncestor',
} %}
{{ craft.navee.nav('mainNavigation', navConfig) }}
Breadcrumbs
{% set navConfig = {
    'breadcrumbs' : true,
} %}
{{ craft.navee.nav('mainNavigation', navConfig) }}

Custom - craft.navee.getNav()

Navee makes it easy to completely customize the html created for your navigation.

When using the craft.navee.getNav() method, you will have access to all available variables.

Description

craft.navee.nav( string $navigationHandle, array $config)

This tag returns a string containing a fully formatted navigation using nested unordered lists.

Parameters

navigationHandle

The handle for the navigation you would like to generate.

config

An array of config parameters to customize the output of your navigation.

Examples

Custom Navigation
{% set navigation = craft.navee.getNav('mainNavigation') %}

<ul>
    {% nav node in navigation %}
        <li{% if node.class %} class="{{ node.class }}"{% endif %}>
            <a href="{{ node.link }}">{{ node.title }}</a>
            {% ifchildren %}
                <ul>{% children %}</ul>
            {% endifchildren %}
        </li>
    {% endnav %}
</ul>
Custom Navigation, but with parameters
{% set navConfig = {
        'startwithActive' : true,
        'maxDepth' : 2,
        'activeClassOnAncestors' : true,
        'ancestorActiveClass' : 'activeAncestor',
    } %}

{% set navigation = craft.navee.getNav('mainNavigation', navConfig) %}

<ul>
    {% nav node in navigation %}
        <li{% if node.class %} class="{{ node.class }}"{% endif %}>
            <a href="{{ node.link }}">{{ node.title }}</a>
            {% ifchildren %}
                <ul>{% children %}</ul>
            {% endifchildren %}
        </li>
    {% endnav %}
</ul>