Custom Fields and Navee for Craft

Since Navee for Craft is folded into Craft’s existing field structure, it’s easy to extend its feature-set to address a wide variety of common and uncommon navigation structures. It may not be obvious at first glance, but you can add any number of custom fields to your navigation nodes. With a little clever templating you can output pretty much whatever markup you could possibly need.

Let’s check out a couple of scenarios to get a hold on this technique.

Adding Descriptions to Nav Items

This is certainly not recommended for every site and it can easily be abused, but there is a time and a place for everything and it’s a nice, simple example to help you get started on custom fields. We’re going to add an optional extra text field for each nav node in a Navee Navigation.

In the CMS:

In the CMS create a new field group under Settings > Fields.
Add a Plain Text field called Description to this group (handle will be description for demo purposes.
Under Navee, select the Add/Edit tab and select your Navigation tree.
Use the Design Your Field Layout section to add your new field group to your Navee tree just like you would with any other Section.
Go to any node in your Navee tree and add some text in the new Description field at the very bottom.

In the template:

Use the custom Navee syntax to output your navigation. It should look something like this:

 {% set navigation = craft.navee.getNav('mainNav') %}

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

Add your new description field to the navigation loop:

{% set navigation = craft.navee.getNav('mainNav') %}

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

As you can see above, the new field is accessed much like it would be while looping through a Matrix or Playa field. The resulting markup will be something like this (I left out the rest of the tree for brevity):

<li>
 <a href="/">Services</a>
 <ul>
  <li>
   <a href="/">Street sweeping</a> <span>We offer extensive
   street sweeping services for all major streets</span>
  </li>
  <li>
   <a href="/">Muppet tutoring</a> <span>Has your muppet lost
   his or her edge? We help them go from class clown to class
   president in no time flat.</span>
  </li>
  <li>
   <a href="/">Ghost whispering</a>
  </li>
  <li>
   <a href="/">Divining</a>
  </li>
  <li>
   <a href="/">Singularity robotics</a>
  </li>
 </ul>
</li>

This technique can be useful for other common scenarios as well. Some examples:

Custom nav icons can be selected from a dropdown or radio input.
An Asset field could be used for thumbnails.
Truncated or expanded text could be made available for different screen sizes.

“Mega Menus” and Extra Markup

There are many flavors of “mega menus” floating around. It would be impossible to prescriptively cover each one, but the common denominator is usually injecting extra markup into the menu to achieve layouts that wouldn’t be possible with lists and anchors alone. In this example we’ll take a look at breaking a long list of nav items into columns by selectively wrapping them in divs. The trick here is to use that custom field option to flag a navigation node as a wrapper instead of another level of navigation. Then we’ll use a conditional in the template to distinguish between the two and build our mega menu.

In the CMS:

Under Settings > Fields create a lightswitch field called Column.
Under Navee, select the Add/Edit tab and select your Navigation tree.
Use the Design Your Field Layout section to add your new field to your Navee tree.
Create new navigation nodes for each column you’d like. In each column node, make sure to turn on the new column lightswitch field.
Distribute nav nodes among your new column nodes as seen below.

In the template:

Use the custom Navee syntax to output your navigation. It should look something like this:

{% set navigation = craft.navee.getNav('mainNav') %}

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

Add conditionals as seen below to alternately insert columns or links depending on the value of the column lightswitch:

<ul>
 {% nav node in navigation %}
  {% if node.column == '1' %}
   <div class="column"><h3>Column</h3>
  {% else %}
   <li><a href="{{ node.link }}">{{ node.title }}</a>   
  {% endif %}
   {% ifchildren %}
    <ul>{% children %}</ul>
   {% endifchildren %}
  {% if node.column == '1' %}
   </div>
  {% else %}
   </li>     
  {% endif %}
 {% endnav %}
</ul>

Note: Separate conditionals for the opening and closing tags is a bit of a bummer, but the children tag can only be used once. Also, we added headlines to each column to make the result more obvious. You may or may not want those. Keep in mind that you could add another custom field to generate meaningful headlines if your mega menu requires that sort of thing.

Here’s the resulting markup. Once again I’ve truncated the navigation to show only the relevant section:

<li>
 <a href="/">Services</a>
 <div class="column">
  <h3>Column</h3>
  <ul>
   <li>
    <a href="/">Street sweeping</a>
   </li>
   <li>
    <a href="/">Muppet tutoring</a>
   </li>
  </ul>
 </div>
 <div class="column">
  <h3>Column</h3>
  <ul>
   <li>
    <a href="/">Ghost whispering</a>
   </li>
   <li>
    <a href="/">Divining</a>
   </li>
   <li>
    <a href="/">Singularity robotics</a>
   </li>
  </ul>
 </div>
</li>

Available on GitHub

Navee for Craft is available on GitHub.