Navigation

breadcrumbTop of Page

Display the breadcrumb navigation menu.

<ion:page:breadcrumb home="true" />

<ion:page:breadcrumb separator=" &bull; " />
<ion:page:breadcrumb separator="" tag="ul" child-tag="li" />

To add the current article title on one single article page :

<ion:page:breadcrumb article="true" />

navigationTop of Page

Displays one level of menu navigation.

This tag can use one optional helper to display the menu.

<!-- Sample code -->
<ion:navigation tag="ul" class="nav">
<li<ion:is_active> class="active"</ion:is_active>>
<a href="<ion:url />"><ion:title /></a>
</li>
</ion:navigation>

<!-- Example of result -->
<ul id="my_nav" class="nav">
<li class="active"><a class="active" href="http://my_domain.tld/home/">Home</a></li>
<li><a href="http://my_domain.tld/service/">Our Services</a></li>
<li><a href="http://my_domain.tld/about/">About our company</a></li>
</ul>

AttributeOptionalValues
level yes The wished displayed level.
Default value : 0
menu yes The wished displayed menu.
Default value : main
helper yes <Name of the helper>:<function> to use to display the navigation menu.
This is another way to implement your own helper to display the navigation.
If your helper file is called my_navigation_menu.php and your helper function is named my_navigation_func(), you will write : <ion:languages helper="my_navigation_menu:my_navigation_func" />

Use one helper with <ion:navigation />

When strongly encourage to not use one helper for basic navigation display. It is simpler and more readable to use the <ion:navigation /> children tags.

If you want to use one helper to display the navigation menu :

If you wish to create your own helper to display the menu in a different way:

  • Copy /application/helpers/navigation_helper.php to : /themes/your_theme/helpers/navigation_helper.php
  • Edit the method get_navigation()

The tag will automatically take your helper instead the default one.

Never modify the file /application/helpers/navigation_helper.php, this file will be overwritten when migrating to a newer version.

Articles in the navigation menu

From ionize 1.0.0, articles can be displayed inside the navigation tag.

<ion:navigation level="1">
    <ion:title tag="h3" class="big" />
    <ion:subtitle function="nl2br" />
    <ion:articles limit="3">
        <ion:article>
            <ion:title tag="h4" />
            <ion:content />
        </ion:article>
    </ion:articles>
</ion:navigation>

tree_navigationTop of Page

A tree based navigation menu, as a unordered HTML list (<ul>...</ul>).

This tag uses one helper.
By default, it uses th helper located in /application/helpers/navigation_helper.php : get_tree_navigation()

<!-- Sample code -->
<ion:tree_navigation active_class="active" tag="ul" id="my_nav" class="nav" /> 

<!-- Example of result -->
<ul id="my_nav" class="nav">
    <li><a href="home">Home</a></li>
    <li class="active"><a href="services">Our Services</a></li>
        <ul>
            <li class="active"><a class="active" href="webdesign">Webdesign</a></li>
            <li><a href="coding">Coding</a></li>
        </ul>
    <li><a href="about">About us</a></li>
</ul>
AttributeOptionalValues
level yes The wished displayed level.
Default value : 0.
depth yes Limit of the menu depth.
"2" means 2 levels, including the starting level.
menu yes The wished displayed menu.
Default value : main
helper yes <Name of the helper>:<function> to use to display the navigation menu.
This is another way to implement your own helper to display the navigation.
If your helper file is called my_navigation_menu.php and your helper function is named my_navigation_func(), you will write : <ion:languages helper="my_navigation_menu:my_navigation_func" />

Customize <ion:tree_navigation />

Navigation tags are coupled to helpers functions, located in : /application/helpers/navigation_helper.php

If you wish to create your own helper to display the menu in a different way:

  • Copy /application/helpers/navigation_helper.php to : /themes/your_theme/helpers/navigation_helper.php
  • Edit the method get_tree_navigation()

The tag will automatically take your helper instead the default one.

Never modify the file /application/helpers/navigation_helper.php, this file will be overwritten when migrating to a newer version.

languagesTop of Page

To navigation through languages, have a look at theĀ Language Tags.