Getting Started

EE 3 Installation

1. Purchase NavEE For ExpressionEngine 3.
2. Extract the .zip file to your desktop.
3. Copy the /system/user/addons/navee/ directory to your /system/user/addons/navee/ directory.

EE 3 Activation

1. Log into your ExpressionEngine control panel.
2. Go to the Add-On Manager.
3. Click Install in the row for NavEE.

EE 2 Installation

1. Purchase NavEE For ExpressionEngine 2.
2. Extract the .zip file to your desktop.
3. Copy the /system/expressionengine/third_party/navee/ directory to your /system/expressionengine/third_party/ directory.
4. Copy the /themes/third_party/navee/ directory to your /themes/third_party/ directory.

EE 2 Activation

1. Log into your ExpressionEngine control panel.
2. Select Add-Ons → Modules.
3. Select Install in the row for NavEE.

Adding NavEE to Templates

There are two ways to add NavEE to your templates: The easy way, and the really easy way. Here’s the really easy way, or you can find out more about the navee:custom tag.

{exp:navee:nav nav_title="main-nav"}

Parameters

All parameters are optional unless otherwise mentioned.

class

The class parameter will add a class to the outermost list container (ul or ol). Useful for styling your navigation using CSS.

class="main-nav"

branch_of_selected

The branch_of_selected parameter will display the entire branch of the selected node.

branch_of_selected="true"

display_all_children_of_selected

This works similarly to only_display_children_of_selected, however, it continues building the navigation down infinitely until the end of the branch.

display_all_children_of_selected="true"

display_entire_branch

Expands the full branch of your navigation which contains the selected node.

display_entire_branch="true"

first_class

This parameter appends a special class onto the first item of each list.

first_class="first"

id

The id parameter will add an ID to the outermost list container (ul or ol). Useful for styling your navigation using CSS.

id="sub-nav"

ignore_include_in_nav

You’ll notice in the control panel that one of the options for each navigation node is Include In Navigation. This is useful if you want to build navigation items for use in your sitemap, but not show them in actual navigation.

ignore_include_in_nav="true"

ignore_regex

This parameter will force NavEE to ignore any regular expressions in your NavEE nodes.

ignore_regex="true"

include_single_parent

If you are using a dynamically generated navigation that starts below the root of your navigation tree, you can pass this parameter to include a single parent item above where your tree begins.

include_single_parent="true"

kids_class

The kids_class parameter accepts a pipe separated list of classes which will be applied to the child uls in your navigation.

This code:

{exp:navee:nav nav_title='main-nav' kids_class='first|second|third'}

Will output:

<ul>
  <li>Lorem
    <ul class="first">
      <li>Ipsum</li>
      <li>Dolor
        <ul class="second">
          <li>Sit
            <ul class="third">
              <li>Amet</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Credit to Brian Litzinger for the addition of this parameter

last_class

This parameter appends a special class onto the last item of each list.

last_class="last"

list_type

By default, NavEE uses nested unordered lists. You can override this functionality and have NavEE use nested ordered lists. list_type only accepts ol as a value. You can do a lot more in the way of customization by using the NavEE Custom Tag.

list_type="ol"

max_depth

The max_depth parameter allows you to set the maximum depth that your navigation will build to. If you only want a two-level navigation, you would set this parameter to:

max_depth="2"

nav_title (required)

The only parameter required by NavEE is nav_title. When you create your navigation in the control panel, your very first step will be to select a nav_title. Just enter that here, and you’ll be on your way.

nav_title="main-nav"

navee_uid

This parameter is here as a way to identify a specific nav if you are using the navee_override_custom_output hook.

navee_uid='your-uid'

no_children

NavEE will generate your entire navigation in nested lists by default. If you would rather just have the top-level items and not dig into the subsequent levels of your navigation, set this to true. no_children only accepts true or false as values.

no_children="true"

no_selected

Override NavEE’s default action of marking matching pages as selected. This parameter only accepts true or false as values.

no_selected="true"

only_display_children_of_selected

Used in building a very specific kind of dynamic subnavigation, this parameter will only build children nodes on the path to the selected item in your navigation (and then one level below that). This is great if you have a large side-navigation and don’t want to use the method of hiding non-selected items with CSS.

only_display_children_of_selected="true"

parent_selected_class

By default, if you use the selected_class_on_parents paremeter, NavEE appends a class of selected onto any parents of the page that you are on. If you would like to add a different class, for example something like parent-selected, specify it here.

parent_selected_class="parent-selected"

reverse

The reverse parameter reverses the order of all items in your navigation.

reverse="true"

selected_class

By default NavEE appends a class of selected onto any item in your navigation that matches the page you are on. If you would like to add a different class, for example something like on, specify it here.

selected_class="on"

selected_class_on_parents

NavEE checks to see if the page you are on is the same as any item in your navigation. If so, it appends a class of selected to that item. Sometimes, however, you might want every parent item of the selected node to have a selected class as well. This is nice for showing your users the full path to your item, and also great for revealing hidden tertiary navigation sections. This parameter only accepts true or false as values.

selected_class_on_parents=“true”

site_id

If you are using the EllisLab MultiSite Manager (MSM), by default NavEE identifies the site the user is currently in and only outputs navigations for that site. For example, if you had two navigations with the same nav_title for multiple sites, NavEE will use the appropriate navigation for the site you are in.

The site_id parameter allows you to override this functionality. This way, if you want to build a single navigation in site #1 and distribute it across your other MSM sites, you can pass this parameter with the site_id of the appropriate site and NavEE will only output that one.

site_id="2"

skip_closed_entries

If passed, this parameter will skip all nodes created with the Guided or Pages methods that have entries with a status currently set to closed.

skip_closed_entries="true"

start_nav_from_parent

This parameter is used to build dynamic subnavigation. If you set this parameter to true, NavEE will search to find the page you are on in the navigation and then build your navigation starting with the children of the top-most parent of that item. Watch the video tutorial. By default, this will start with the top-most parent, but that can be overridden with the start_nav_from_parent_depth parameter.

start_nav_from_parent="true"

start_nav_from_parent_depth

This parameter is used in conjunction with start_nav_from_parent and allows you to override the default functionality of starting the navigation from the top-most parent. If you want your navigation to start from two levels deep, you would use the following code:

start_nav_from_parent_depth="2"

start_nav_on_level_of_selected

This parameter is used in building dynamic subnavigation. If set to true, this parameter will force NavEE to identify the selected node and build your navigation from the same depth as your selected item. Meaning, any siblings of your selected item will be on the top level of the navigation generated when this parameter is used.

start_nav_on_level_of_selected="true"

start_nav_with_kids_of_selected

Similar to start_nav_on_level_of_selected, but it sets the id of your selected item as the start_node and begins your navigation with the descendants of that item.

start_nav_with_kids_of_selected="true"

start_node

By default, NavEE will begin at the very top of your navigation. If you’d prefer to see only a subsection of your navigation, just pass this parameter. You can easily find the appropriate code by clicking the EE Code button on the node you’d like to start with in your control panel.

Additionally, you can pass a string to the start_node parameter. If the string you pass matches any link field in your control panel, it will start the navigation below that node.

start_node="42"

Or

start_node="/some/string/that/matches/your/link/field"

start_x_levels_above_selected

This parameter is used in building dynamic subnavigation. If you use, for example, the number 2 in this parameter, it will identify the selected item in your tree, move up two nodes, and start the navigation from that point.

start_x_levels_above_selected="2"

Is Nav Empty? Function

As of NavEE 2.2 we have included a new {exp:navee:is_nav_empty} function. This function will return either true or false and accepts the same parameters as the standard :navigation and :custom tags.

{if "{exp:navee:is_nav_empty nav_title='your-nav'}" == "true"}
  <h2>Nav is empty</h2>
{if:else}
  <h2>Nav is NOT empty</h2>
  {exp:navee:navigation nav_title="your-nav"}
{/if}