Navigation Plugin

The navigation plugin creates lists of navigation links based on navigation groups defined in CP > Design > Navigation.

navigation:links

{{ navigation:links }}

Creates a list of links for a group.

Attributes

Name	Default	Required	Description
group	None	Yes	The navigation group the tag should use.
group_segment	None	No	If your navigation name is in the URI, you can specify the numeric URI segment here, and it will pull the value from the URI.
max_depth	None	No	The maximum number of levels deep the nav can go. For example, 2 would mean parent and child, no grandchildren.
list_tag	ul	No	Choose between `ol` and `ul` lists. The value of this is wrapped in brackets on either end.
tag	li	No	Type of tag that surrounds each navigation item. The value of this is wrapped in brackets on either end.
class	current	No	The CSS class to add when an element is the current page.
link_class	None	No	The class names to apply in all anchor elements.
first_class	first	No	The class applied the first in a list of dropdown links.
last_class	last	No	The class applied to the last in a list of dropdown links.
more_class	None	No	The class to use when an element has child elements.
separator	None	No	String that separates each navigation item.
items_only	true	No	`true` or `false`. Set if the output source code should be wrapped with an optional list_tag.
indent	None	No	tab or space. Character used to indent the output of source code.
wrap	None	No	HTML that that you wish to wrap the link title in. Most likely a `span` element
top	link	No	Set to "text" and the top level menu items will be rendered as plain text instead of links.

Single Tag Usage

You can use the basic single-tag approach to output a chunk of HTML by itself. This will apply the class names to the <li> tags (default) and use the <a> tags (default) to wrap the anchors.

{{ navigation:links group="header" }}

Returns:

<li class="first current"><a href="http://localhost/pyrocms/index.php">Home</a></li><li class="last"><a href="http://www.google.com">About Us</a></li>

You can use the basic single-tag approach like this to output a chunk of HTML that renders indented source code and adds a custom class name to all link anchors.

{{ navigation:links group="header" indent="tab" link_class="foo" }}

Returns:

<li class="first current">
    <a href="http://localhost/pyrocms/index.php" class="foo">Home</a>
</li>
<li class="last">
    <a href="http://www.google.com" class="foo">About Us</a>
</li>

If you use nested links the default tag outputs the following html when menu items are arranged in a multilevel menu.

{{ navigation:links group="header" indent="tab" }}

Returns:

<li class="first current">
    <a href="http://example.com/home">Home</a>
</li>
<li class="">
    <a href="http://example.com/about-us">About Us</a>
    <ul>
        <li class="first">
            <a href="http://example.com/contact">Contact</a>
        </li>
        <li class="last">
            <a href="http://example.com/staff">Staff</a>
            <ul>
                <li class="single">
                    <a href="http://example.com/history">History</a>
                </li>
            </ul>
        </li>
    </ul>
</li>
<li class="last">
    <a href="http://example.com/blog">Blog</a>
</li>

Tag Pair Usage

If you'd like complete control over your navigation markup, you can use the links function as a tag pair:

<ul>
{{ navigation:links group="header" }}
<li><a href="{{ url }}" class="{{ class }}">{{ title }}</a>
	{{ if children }}
	<ul>
	{{ children }}
		<li><a href="{{ url }}">{{ title }}</a></li>
	{{ /children }}
	</ul>
	{{ endif }}
</li>
{{ /navigation:links }}
</ul>

Variables

The following variables are available to you in the tag pair:

Name	Description
{{ url }}	Full URL of the link.
{{ title }}	Link title.
{{ class }}	Link class.
{{ target }}	Link target.
{{ children }}	Tag pair of child link elements. Each child element has all the same above variables as the main elements.
{{ total }}	The total number of links

Advanced Options

You can use a combination of params to output a chunk of HTML that shows a short paragraph of navigation, using <p> as list_tag to wrap all items by disabling items_only and using the tag <span> to wrap each anchor link.

{{ navigation:links group="header" tag="span" class="active" separator="|" list_tag="p" items_only="false" }}

Returns:

<p><span class="first active"><a href="http://localhost/pyrocms/index.php">Home</a></span> | <span class="last">...
<a href="http://www.google.com">About Us</a></span></p>