{navigation}
- Attributes
- Examples

{navigation}

The {navigation} TAG returns the pre-rendered HTML of a navigation.

Attributes

id - (optional, int)

The ID to load the children Items from. Default is the current Menus ID.

language - (optional, string)

The Itemtype to load the Item from. Default is the current Menus language.

css - (optional, string)

The CSS class to use for a link (<a class=””>).

selected - (optional, string)

The CSS class to use for the active Item. If not set the “css” attribute is used.

active - (optional, string)

If set, this replaces the “prefix” parameter for the active item.

prefix - (optional, string)

The prefix for each link (rendered before the opening link <a> TAG)

suffix - (optional, string)

The suffix for each link (rendered after the closing link </a> TAG)

last - (optional, string)

If set, this replaces the “suffix” parameter for the very last item in the list.

start - (optional, string)

The HTML prefix to start the rendering with.

end - (optional, string)

The HTML to append at the very end of the rendering process.

counter - (optional, string)

The amount of items the navigations had. This value will be assigned to the named Smarty variable.

activeInTree - (optional, boolean)

If set to “true” this searches the items subtree for the active Item. Caution: This can be a performance problem on huge sites or in big navigation trees.

Examples

The most common use case, a main navigation including a link to your homepage (change the language if required!):

  {load_item itemtype="1" id="-1" assign="topLevel" language="en"}
  <ul id="navigation">
  <li><a href="{link item=$topLevel">{$topLevel->getName()}</a></li>
  {navigation id=$topLevel->getID() language=$topLevel->getLanguageID() prefix="<li>" suffix="</li>"}
  </ul>

Top Level

This example loads the Top menu and shows its name and the childs as unordered list.

<html>
<head>
   {load_item itemtype="1" id="-1" assign="topLevel"}
   <title>Navigation Example for {$topLevel->getName()}</title>
</head>
<body>
   The Menu <b>{$topLevel->getName()}</b> has the following Sub Items:<br>
   {navigation id=$topLevel->getID() language=$topLevel->getLanguageID() start="<ul>" end="</ul>" prefix="<li>" suffix="</li>" counter="amount"}
   <br>
   It has {$amount} child(s).
</body>
</html>

Current menu

This example loads the current menu menu and shows its name and the childs as unordered list.

<html>
<head>
   <title>Navigation Example for {$MENU->getName()}</title>
</head>
<body>
   The Menu <b>{$MENU->getName()}</b> has the following Sub Items:<br>
   {navigation id=$MENU->getID() language=$MENU->getLanguageID() start="<ul>" end="</ul>" prefix="<li>" suffix="</li>" counter="amount"}
   <br>
   It has {$amount} child(s).
</body>
</html>

This example loads the menu with the ID 10 in english and shows its name and the childs as unordered list. Please note: This example might not work at your system, if the page does not exist. Then change then ID and language to a page on your system that has children.

<html>
<head>
   <title>Navigation Example</title>
</head>
<body>
   The Menu with ID <b>10</b> in <b>english</b> has the following children:<br>
   {navigation id="10" language="en" start="<ul>" end="</ul>" prefix="<li>" suffix="</li>" counter="amount"}
   <br>
   It has {$amount} child(s).
</body>
</html>

A complex navigation example

This example works with two and three level systems. It displays a top level navigation including a HOME link. If the current page is one of the toplevel menus, the css class “current” is appended like <a href=“menuLink” class=“current”>.

If you navigate to one of the subpages, their children are displayed in the

.

At the pages end, a simple footer menu is displayed, where you need to replace “Your-Footer-ID-here” with an existing Menu ID.

<html>
<head>
   <title>Complex Navigation Example</title>
</head>
<body>
 <div id="topmenu">
   <ul>
   {load_item itemtype="1" id="-1" assign="topLevel"}
   <li><a href="{link item=$topLevel}"{if $MENU->getID() == $topLevel->getID()} class="current"{/if}>{$topLevel->getName()}</a></li>
   {navigation id=$topLevel->getID() language=$topLevel->getLanguageID() prefix="<li>" suffix="</li>" selected="current"}
   </ul>
  </div>
 
  <div id="content">
     ... put your content here...
  </div>
 
  <div id="subMenu">
    {if $MENU->getParentID() == -1}
      {navigation id=$MENU->getID() language=$MENU->getLanguageID() start="<ul>" end="</ul>" prefix="<li>" suffix="</li>"}
    {elseif $MENU->getParentID() > -1}
      {navigation id=$MENU->getParentID() language=$MENU->getLanguageID() start="<ul>" end="</ul>" prefix="<li>" suffix="</li>"}
    {/if}
    ... more menu column stuff here ...
  </div>
 
  <div id="footer">
   {load_item itemtype="1" id="Your-Footer-ID-here" assign="footer"}
   {navigation id=$footer->getID() language=$footer->getLanguageID() start="<ul>" end="</ul>" prefix="<li>" suffix="</li>"}
  </div>
</body>
</html>

BIGACE Documentation