​Navigation for pixolino templates

Page navigation is included with the function fx_page.navigation. 

Parameters for fx_page.navigation

  1. The actual page. This could be either the pixolino page object (available in the variable page) or a page slug (represented by a string).
  2. The level of the navigation tree at which the navigation component will start rendering. Counting starts with 1.
  3. The number of levels which will be included in the navigation. If set to 0 only the level defined in parameter 2 will be rendered.
  4. The application context (available in the variable _context). This context is required and should not be changed.

Example of a navigation call inside a template

{{ fx_page.navigation(page, 1, 0, _context) }}
​Page navigations do not contain pages with render mode “Blog Article”.

​Generated HTML

The navigation component renders an unsorted list <ul>. Each navigation element is represented as a list element <li>. Each <li> contains in it's class attribute:

  • a CSS class holding the a unique page slug (fx_page_SLUG).
  • a CSS class holding the level number (fx_lv_NUMBER).
  • optionally the CSS class fx_act (see below).
  • optionally the CSS class fx_open (see below).

The first two classes match with the ones used in the breadcrumbs navigation component.

If more than one level of the page tree is included in the navigation element, the additional levels will be represented ad another <ul> which is placed at the bottom of the according <li>. If the active page (CSS class fx_act) is not in the first level of <li> elements, each <li> which is in the path from root to the active page holds and CSS class fx_open.

Inside the <li> the navigational link <a> is placed. If the <li> represents the active page, the <a> is replaced by a <span>.

Be aware that the navigation component does not render a <nav> tag. You should place the navigation function always inside a <nav> tag within your template's code!

Example of generated HTML code

<ul class="fx_navigation">
    <li class="fx_page_PAGEID fx_lvl_1 fx_open">
        <a href="URL">PAGE TITLE 1</a>
        <ul>
            <li class="fx_page_PAGEID fx_lvl_2 fx_act">
                <span>ACTIVE PAGE TITLE 1A</span>
            </li>
            <li class="fx_page_PAGEID fx_lvl_2">
                <a href="URL">PAGE TITLE 1B</a>
            </li>
        </ul>
    </li>
    <li class="fx_page_PAGEID fx_lvl_1">
        <a href="URL">PAGE TITLE 2</a>
    </li>
</ul>
​Each website has one page tree. Additional page trees are not supported (e.g. for secondary navigation bars in the footer). If you need to separate some pages to a independent navigation, you should disable the display for navigation elements in the settings of these pages and create the links of your navigation manually. (By pinning the PageObject, which contains your newly created navigation, you can spread the it's display across all pages of the given template section.)