Installation
- Purchase NavEE
- Extract the .zip file to your desktop
- Copy the /system/expressionengine/third_party/navee directory to your /system/expressionengine/third_party/ directory
- Copy the /themes/third_party/navee directory to your /themes/third_party directory
Activation
- Log into your ExpressionEngine Control Panel
- Click the Modules tab
- Click "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 is the really easy way. Or you can find out more about the NavEE Custom Tag.
{exp:navee:nav nav_title="main-nav"}Parameters
- class (optional)
-
The class parameter will add a class to the outermost list container (ul or ol). Useful for styling your navigation using CSS. Check out some great examples of navigation CSS.
class="main-nav" - first_class (optional)
-
This parameter appends a special class onto the first item of each list.
first_class="first" - id (optional)
-
The id parameter will add an id to the outermost list container (ul or ol). Useful for styling your navigation using CSS. Check out some great examples of navigation CSS.
id="sub-nav" -
You'll notice in Control Panel that one of the optionals 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 (optional)
-
This parameter will force NavEE to ignore any regular expressions in your NavEE nodes.
ignore_regex="true" - include_single_parent (optional)
-
If you are using a dynamically generated navigation which starts below the root of your navigation tree - you can pass this parameter to include a single parent item above where you tree begins.
include_single_parent="true" - last_class (optional)
-
This parameter appends a special class onto the last item of each list.
last_class="last" - list_type (optional)
-
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 whole lot more in the way of customization by using the NavEE Custom Tag
list_type="ol" - max_depth (optional)
-
The max_depth parameter allows you to set the max depth that your navigation will build to. If you only want a two level navigation, you would set this parameter to:
max_depth="2" -
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" - no_children (optional)
-
NavEE will spit out 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 parameters.
no_children="true" - no_selected (optional)
-
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 (optional)
-
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 (optional)
-
By default, if you have passed 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, something like "parent-selected", simply specify it here.
parent_selected_class="parent-selected" - reverse (optional)
-
The reverse parameter reverses the order of all items in your navigation.
reverse="true" - selected_class (optional)
-
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, something like "on", simply specify it here.
selected_class="on" - selected_class_on_parents (optional)
-
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.
selected_class_on_parents only accepts a value of true or false.
selected_class_on_parents="true" - site_id (optional)
-
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 nav 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 nav in site #1 and distribute it across your other sites - you can simply pass this parameter with the site_id of the appropriate site and NavEE will only output that one.
site_id="2" -
This parameter is used to build dynamic subnavigation. Essentially, 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 here. By default, this will start with the top-most parent, but that can be over-ridden with the start_nav_from_parent_depth parameter.
start_nav_from_parent="true" -
This parameter is used in conjunction with start_nav_from_parent and allows you to over-ride the default functionality of starting the nav from the top-most parent. If you want your navigation to start from two levels deep, you would pass the following code:
start_nav_from_parent_depth="2" -
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 passed.
start_nav_on_level_of_selected="true" -
Similar to start_nav_on_level_of_selected, but instead 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 (optional)
-
By default, NavEE will begin your navigation at the very top of your navigation. If you'd prefer 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 (optional)
-
This parameter is used in building dynamic subnavigation. If you pass, for example, the number 2 to this navigation - it will identify the selected item in your tree, move up two nodes and start the navigation from that point down.
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 :nav 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:nav nav_title="your-nav"}
{/if}