Breadcrumb navigation for pixolino templates

Page navigation is included with the function fx_page.breadcrumbs. This function accepts only one default parameter, which is required and nearly never needs to be changed: the application context (available in the variable _context). 

Example of a navigation call inside a template

{{ fx_page.breadcrumbs(_context) }}

​Generated HTML

The breadcrumb 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).

These classes match with the ones used in the regular navigation component.

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 breadcrumb navigation component does not render a <nav> tag. You should place the breadcrumbs always inside a <nav> tag within your template's code!

Example of generated HTML code

<ul class="fx_breadcrumbs">
    <li class="fx_page_PAGEID fx_lvl_1">
        <a href="URL">PAGE TITLE 1</a>
    </li>
    <li class="fx_page_PAGEID fx_lvl_2">
        <a href="URL">PAGE TITLE 2</a>
    </li>
    <li class="fx_page_PAGEID fx_lvl_3">
        <span>PAGE TITLE 3</span>
    </li>
</ul>