Booyant - NavEE

Demo

Customize Your NavEE

Prefer to roll your own NavEE? We understand that with navigation, one size does not always fit all. Using the NavEE custom functionality you can easily build your own navigation structure using any HTML elements you like. To build a navigation similar to what the default NavEE tags would output, you could do something like this:

{exp:navee:custom nav_title="main-nav" wrap_type="ul"}
   <li class="{class}"><a href="{link}">{text}</a>{kids}</li>
{/exp:navee:custom}

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"

ignore_include_in_nav (optional)

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"

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"

nav_title

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 paramenters.

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" the 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"

start_nav_from_parent (optional)

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"

start_nav_from_parent_depth (optional)

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"

start_nav_on_level_of_selected (optional)

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"

start_nav_with_kids_of_selected (optional)

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"

wrap_type (optional)

By default, NavEE uses nested unordered lists. You can override this functionality, which will make NavEE wrap any grouping of nav items in an opening/closing pair of whatever you pass here. Wrap type optionally will also accept a parameter of "none" which will output no wrap tags.

wrap_type="table"

Variables for {exp:navee:custom}

accesskey: The access key variable outputs any access key you have associated with a NavEE item.
class: The class variable outputs any specific class you have associated with a NavEE item. Additionally, this variable will contain the "selected" class, and any first/last item classes you may have defined (when applicable).
count: The count variable outputs a running count of the items in your navigation. Useful for writing conditions based on the nth nav item in child group.
custom: The custom variable outputs what you have entered in the "Include additional html in <li>" section for each NavEE item.
custom_kids: The custom_kids variable outputs what you have entered in the "Include additional html in <ul> of children" section for each NavEE item.
id: The id variable outputs the id associated with each NavEE item.
has_kids: Boolean which returns true if the current element has child elements.
include_in_nav: This will return true or false depending on what you have configured in the Include In Navigation section.
is_first_item_on_level: Boolean which returns true for the first item on each level of your navigation.
is_last_item_on_level: Boolean which returns true for the last item on each level of your navigation.
is_previous_item_selected: Boolean which returns true if the item preceding the current item was assigned the class of selected.
is_selected: Boolean which returns true if the current element is the selected node.
kid_count: The kid_count variable outputs the number of child elements the current node has.
kids: If your navigation is more than one level deep, congratulations, you are a parent. Well, not really, but each nav item that has child nodes beneath it, will have the kids tag available to it. By adding this variable, you navigation will become recursive.
level: The level variable outputs which level of navigation you are on. So if your nav is three levels deep, all your top nodes will have a level of 1, the secondary items a level of 2 and so on.
link: The link variable outputs the link associated with each NavEE item.
link_type: The link_type variable outputs whether the current link was created using the Manual, Guided or Pages options.
name: The name variable outputs the name attribute associated with each NavEE item (for use in anchor tag).
navee_id: Each NavEE item has a unique identifier. The navee_id variable outputs this identifier.
navee_entry_id: If your NavEE element was built using either the Guided or Pages method - the Channel Entry ID associated with that item is available through the navee_entry_id variable. This can be used to pull content from your channel entry into your navigation as necessary.
navigation_id: Each NavEE navigation group has a unique identifier. The navigation_id variable outputs this identifier.
rel: The rel variable outputs the rel attribute associated with each NavEE item (for use in anchor tag).
target: The target variable outputs the target attribute associated with each NavEE item (for use in anchor tag).
title: The target variable outputs the title attribute associated with each NavEE item (for use in anchor tag).
text: The text variable outputs the text associated with each NavEE item.

NavEESimple Navigation, Made Simple.

Demo

Customize Your NavEE

Parameters

Variables for {exp:navee:custom}

Better Pages

LikEE