Advanced

Last updated: March 16th 2022

This is advance code. Synax is {exp:super_navigation:custom}. The best part of this tag is, you can use any html structure, any fields, children options etc. all with this that makes it fully customized tag for navigation.

Parameters

To identify which navigation to call, this is required parameter. (you can also use nav_short_name parameter in place of nav_id)

nav_id="1"

To identify which navigation to call, this is required parameter. (you can also use nav_id parameter in place of nav_short_name)

nav_short_name="header_navigation"

site_id

If you are using MSM and wants to show site 1 menu in site 2, you can use this parameter to tell plugin to bring MSM site menu.

prefix

You can pass any prefix to change variables of given loop. So if any of the variable match with any parent loop, You can have unique variable that fetch right data.

prefix="link"

disable

For categories and entries URL patterns, We gives facility to bring categories and entries with category parents. That runs extra queries in backend, If you not wish to run those queries and not wish you to bring parent categories to be added into URL, You can pass this parameter.

Right now only 1 item is added into disable parameter that is parent_uri

disable="parent_uri"
// OLD output
http://example.com/blog/category1/category2/blog-url-title

// New output
http://example.com/blog/category2/blog-url-title

parent_only (yes/no)

If you pass this parameter, All the childrens will be ignored and you will get level 1 menu only. (This parameter can be use with combination of parent_id parameter so you can get single level of any children tree.)

parent_id

All the links you create got a unique ID. We default start navigation from 0 (beginning). If you want to start navigation from middle of somewhere, you can pass this parameter and navigation will start from that point.

Note: This ID is unique ID that assign to the navigation link created in backend.

parent_path

In most cases, its not possible to get current children menu only with parent_id. To make it more user friendly, we have added this parameter. You can use this to get children menu of current page or any custom url page.

Note: Added in v1.0.7

{exp:super_navigation:basic
    parent_path="{current_path}"
    include_self="yes"
}
{exp:super_navigation:basic
    parent_path="/services"
    include_self="no"
}

include_self

This parameter is only working when you are passing parent_id parameter. If you pass parent_id to some link, all the children of that parent will show in the menu. You have to pass this parameter to show that parent link to the menu. (Default is no)

include_self="yes"

max_level

You can pass this parameter to get a limited level of Navigation links.

ul_class

If you wish to add classes to all the wrapper, you can add it here. To add this class, you have to pass a variable {ul_class} to the wrapper. Without adding this class, your param class will not be added into menu.

You can pass level wise different classes or single class to add into all the level.

ul_class="nav"
// All wrapper will assign this class.
ul_class="level-1|level-2|level-3|level-4"
Level 1 class => level-1
Level 2 class => level-2
Level 3 class => level-3
Level 4 class => level-4

active_ul_class

If you wish to add a class to all the active wrapper, you can add it here. If any link is active, this class will be added to way to all the parent wrapper.

To add this class, you have to pass a variable {ul_class} to the wrapper. Without adding this class, your param class will not be added into menu.

active_ul_class="active"

li_class

If you wish to add classes to all the li, you can add it here. To add this class, you have to pass a variable {li_class} to the sub wrapper. Without adding this class, your param class will not be added into menu.

You can pass level wise different classes or single class to add into all the level.

li_class="nav-li"
// All <li> will assign this class.
li_class="level-1|level-2|level-3|level-4"
Level 1 <li> class => level-1
Level 2 <li> class => level-2
Level 3 <li> class => level-3
Level 4 <li> class => level-4

active_li_class

If you wish to add a class to all the active <li>, you can add it here. If any link is active, this class will be added to way to all the parent sub wrapper.

To add this class, you have to pass a variable {li_class} to the sub wrapper. Without adding this class, your param class will not be added into menu.

If you wish to add classes to all the <a> tag, you can add it here. To add this class, you have to pass a variable {link_class} to the <a> tag. Without adding this class, your param class will not be added into menu.

You can pass level wise different classes or single class to add into all the level.

link_class="nav-link"
// All <a> will assign this class.
link_class="level-1|level-2|level-3|level-4"
Level 1 <a> class => level-1
Level 2 <a> class => level-2
Level 3 <a> class => level-3
Level 4 <a> class => level-4

If you wish to add a class to all the active <a>, you can add it here.

To add this class, you have to pass a variable {link_class} to the <a> tag. Without adding this class, your param class will not be added into menu.

Variables

Here is all the variables you can use with custom navigation.

This variable will returns the navigation group ID.

This variable will returns the Link ID.

link_text

This variable will returns the Link Text. In Entry and Category, Link Text field is Optional. If this field is empty is that case, It will return entry title for Entry and category name for Category.

This variable will return type of link. It can be one of entry, category and url.

This variable will return final link of the navigation item.

This variable will return link string that will be without base url and trialing slash. This is created to pass the URLs into Publisher or Transcribe parse url tags. (That makes this plugin transcribe supported)

{link_string}

// Output 
blog/my-blog-entry

entry_id

This variable will return Entry ID of given link if link type is entry

category_id

This variable will return Category ID of given link if link type is category.

This variable will return order of link. it can be 1..2..3.. in number.

target

This variable will return true (1) if link is set to open in new tab either it will return null.

parent_id

This variable will return Parent ID of given link. If given link is root, it will return 0.

has_children

This variable will return true if there is child navigation exists for given menu item.

ul_class

This variable will return all the classes added in ul_class and active_ul_class parameter.

li_class

This variable will return all the classes added in li_class and active_li_class parameter.

This variable will return all the classes added in link_class and active_link_class parameter.

count

This variable will return level wise count.

total_results

This variable will return level wise total number of nodes.

absolute_count

This variable will return absolute count no matter which level you are.

absolute_results

This variable will return absolute result count no matter which level you are.

CUSTOM_FIELD

any custom field you added in navigation group can be use here as a variable.

Examples

Here is few examples of custom super navigation tag.

Simple Navigation
{exp:super_navigation:custom nav_short_name="header_navigation" prefix="link"}
	{if link:no_results}No nav Found!{/if}
	{if link:absolute_count == 1}<ul class="{link:ul_class}">{/if}

	<li class="{link:li_class}">
		<a href="{link:link}" title="{link:link_text}" class="{link:link_class}" {if link:target}target="{link:target}"{/if}>
			{link:link_text}
		</a>

		{link:child}
		<ul class="{link:ul_class}">
			{link:child:render}
		</ul>
		{/link:child}
	</li>

	{if link:absolute_count == link:absolute_results} </ul> {/if}
{/exp:super_navigation:custom}
Simple Navigation with DIV structure
{exp:super_navigation:custom
	nav_short_name="header_navigation" prefix="nav"
	ul_class='my-ul' li_class='my-li' link_class='my-link'
	active_ul_class='ul_active' active_li_class='li_active' active_link_class='link_active'
}
	{if nav:no_results}No nav Found!{/if}
	{if nav:absolute_count == 1}<div class="nav {nav:ul_class}">{/if}

	<div class="{nav:li_class} inner-wrapper">
		<a href="{nav:link}" title="{nav:link_text}" class="{nav:link_class}" target="{nav:target}">
			{nav:link_text}
			{if nav:has_children}<span class="caret"></span>{/if}
		</a>

		{nav:child}
		<div class="{nav:ul_class} wrapper">
			{nav:child:render}
		</div>
		{/nav:child}
	</div>

	{if nav:absolute_count == nav:absolute_results}</div>{/if}
{/exp:super_navigation:custom}