Navigation for pixolino templates

Page navigation is included with the function fx_page.navigation.

Parameters for fx_page.navigation

The page for which the navigation should be rendered. This is usually set to the pixolino page object representing the current page which is available in the variable page. Alternatively, a page slug, represented by a string, may be passed. This can be used to render the website's main menu on a landing page. The given page slug must belong to the same translation as the page the navigation is displayed on.
The level of the navigation tree at which the navigation component will start rendering. Counting starts with 1.
The number of deeper levels which will be included in the navigation. If set to 0, only the level defined in parameter 2 will be rendered.
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.)

Custom-Flow Democontent (Private Beta)

In order to render a navigation inside of custom flow, there is a way to define a navigations content. In the slot-definition object you can define a _navigation array. This array represents a navigation. Each entry should be a object with the following properties:

string title: the Navigation entries title
bool? active: Set this true to indecate, that it is the current page
array? children: recursiv array for subnavigation

{
    /* slots */
    "_navigation": [
        { "title": "Home", "active": true },
        {
            "title": "Details", "children": [
                { "title": "Item 1" },
                { "title": "Item 2" },
                { "title": "Item 3" }
            ]
        },
        { "title": "Blog" },
        { "title": "About us" }
    ]
}

There is also some syntactic sugar available to place a navigation in the template.

{{ fx_page.navigation(page, 1, 0, _context) }}
<!-- can be replaced with -->
<pixolino-nav lvl="1" dep="0"/>
<!-- or, since lvl and dep have default values -->
<pixolino-nav />

​Navigation for pixolino templates