Builtin Template Tags¶
Generally you will get access to the menus created by treenav through template tags. Currently treenav offers four template tags to use.
Show Treenav¶
{% show_treenav "top-level-slug" full_tree="False" %}
This is the canonical tag you will be using. It outputs nested lists starting
with all the children of the menu item whose slug matches top-level-slug
.
Then it builds the next level down if one exists for the active leg of the tree
and so on. Only the active portion of the tree will be shown
unless full_tree is True, i.e. full_tree="True"
. To see the HTML output go to Menu HTML Example.
Render Menu Children¶
{% render_menu_children model-object %}
This takes a MenuItem model instance and builds a nested list like
Menu HTML Example. This is mostly used internally and is the same
as show_treenav
except it takes a model object instead of its slug and does
not have a full_tree option.
Menu HTML Example¶
The above two templates tags use the same template to generate lists.
Note that Tests is the page currently active. It as well as its parents have the class active-menu-item attached to them. The links on active nodes are marked with the class active-menu-item-link. The depth-N class, where N starts at 0 and increases for each nested UL, it is often used to help apply custom CSS depending on how deeply a UL is nested.
The topmost list items and links are top-level and top-level-link respectively. Deeper lists have the class parent-slug-child which can be seen on the Test item.
<ul id="menu-primary-nav" class="menu depth-0">
<li id="menu-item-home" class="inactive-menu-item top-level">
<a class="inactive-menu-item-link top-level-link" href="/" title="Home">Home</a>
</li>
<li id="menu-item-about" class="active-menu-item top-level">
<a class="active-menu-item-link top-level-link" href="/about/" title="About">About</a>
<ul id="menu-about" class="menu depth-1">
<li id="menu-item-test" class="active-menu-item about-child">
<a class="active-menu-item-link about-child-link" href="/test/" title="Test">Test</a>
</li>
</ul>
</li>
</ul>
Single Level Menu¶
{% single_level_menu "top-level-slug" 6 %}
This is used to build single-level navigations. The first argument is used to define the MenuItem that will be used as the top of the tree and the second argument defines the level to be displayed. Often this will be used when a page has multiple menus where one menu is the top level, and another is the first level of the active page.
For HTML output go to Menu HTML Example. Although the example is two levels, this can only output one. One thing to note is the if you select a depth of 3, then the depth class mentioned above will be depth-3, not 0 even though its the top(and only) UL.
Show Menu Crumbs¶
{% show_menu_crumbs "top-level-slug" %}
Builds a list of the active MenuItems between the top-level-slug and the current active menu item so as to build a breadcrumb stucture.
HTML Output¶
The HTML generated by show_menu_crumbs.
<ul>
<li>
<a href="/" title="Home">
Home
</a>
</li>
<li>
<a href="/admin" title="Test">
Test
</a>
</li>
<li>
<a href="/test/" title="New Test">
New Test
</a>
</li>
</ul>