This page shows the demo of the Pico Pages List plugin.
https://github.com/nliautaud/pico-pages-list
Generate a flat navigation using the default page array.
{{ pages | navigation }}
Generate a nested navigation using the nested array.
{{ nested_pages | navigation }}
The html structure and the css classes allows styling current page, active parent pages, naked directories, getting pages by name, etc. to build any type of navigation : dropdown menus, single-lined breadcrumbs...
.is-page, .is-directory, .is-current, .is-active, .has-childs ...
Filtering pages paths with the exclude filter :
{{ nested_pages | exclude('PicoPagesList') | navigation }}
Filter the inner pages by using a trailing slash :
{{ nested_pages | exclude('PicoPagesList/') | navigation }}
Filter all pages except the given ones with only, and chain filters :
{{ nested_pages | only('PicoPagesList') | exclude('PicoPagesList/sub/bar') | navigation }}
Filters can be given multiple paths :
{{ nested_pages | only('PicoPagesList/sub', 'index') | navigation }}
Custom loop :
{% macro menu(items) %}
<ul>
{% for name,item in items %}
<li>
{% if item.url %}
<a href="{{ item.url }}">{{ item.title }}</a> : {{ item.description }}
{% else %}
<span>{{ name }}</span>
{% endif %}
{% if item._childs %}
{% import 'macros.twig' as macros %}
{{ macros.menu(item._childs) }}
{% endif %}
</li>
{% endfor %}
</ul>
{% endmacro %}
{% import 'macros.twig' as macros %}
{{ macros.menu(nested_pages) }}
- Home :
- PicoContact :
- PicoContentEditor :
- PicoOutput :
- PicoPagesImages :
- PicoPagesList :
- PicoUsers :