{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
`<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
`<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>`

A dedicated menu

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
`<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 <div id="subMenu">.

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
`<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>`