-
Notifications
You must be signed in to change notification settings - Fork 6
Tags
There are two ways to build you navigation with Navee. The simple method, and the custom method.
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.
craft.navee.nav( string $navigationHandle, array $config)
This tag returns a string containing a fully formatted navigation using nested unordered lists.
The handle for the navigation you would like to generate.
An array of config parameters to customize the output of your navigation.
{{ craft.navee.nav('mainNavigation') }}
{% set navConfig = {
'startwithActive' : true,
'maxDepth' : 2,
'activeClassOnAncestors' : true,
'ancestorActiveClass' : 'activeAncestor',
} %}
{{ craft.navee.nav('mainNavigation', navConfig) }}
{% set navConfig = {
'breadcrumbs' : true,
} %}
{{ craft.navee.nav('mainNavigation', navConfig) }}
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.
craft.navee.nav( string $navigationHandle, array $config)
This tag returns a string containing a fully formatted navigation using nested unordered lists.
The handle for the navigation you would like to generate.
An array of config parameters to customize the output of your 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>
{% 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>