PyroCMS theme custom navigation structure

Question

I've searched everywhere but can't seem to find anything in the documentation or anywhere else. I've created my own custom theme, copypasting stuff from the Starter theme which ships with PyroCMS. In my navigation partial there is this twig directive:

{{ structure()
            .linkAttributesDropdown({'data-toggle': 'dropdown'})
            .listClass('nav navbar-nav navbar-right')
            .childListClass('dropdown-menu')
            .render()|raw }}

This works when using the Bootstrap framework. I am using Purecss.io and I want to assign different classes and assign classes to more elements. My navigation should look like this:

<ul class="pure-menu-list">
    <li class="pure-menu-item pure-menu-selected">
        <a href="http://local.dev" class="pure-menu-link" >Home</a>
    </li>
    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
        <a href="http://local.dev/products" class="pure-menu-link">Item with children</a>
    <ul class="pure-menu-children">
        <li class="pure-menu-item">
            <a href="http://local.dev/products/child1" class="pure-menu-link">Child 1</a>
        </li>
        <li class="pure-menu-item">
            <a href="http://local.dev/products/chil2" class="pure-menu-link">Child 2</a>
        </li>
    </ul>
    </li>
 </ul>

I've tried the folling in my partial:

{{ structure()
            .linkAttributesDropdown({'class': 'pure-menu-item pure-menu-has-children pure-menu-allow-hover'})
            .listClass('pure-menu-list')
            .elementClass('pure-menu-item')
            .childListClass('pure-menu-children')
            .render() }}

But that doesn't do the trick.

How would I accomplish this? Where can I find documentation for the used functions structure(), listClass() etc.?

Thanks in advance!

score 2 · Accepted Answer · answered Mar 25 '17 at 15:04

Unfortunately this portion of the system is still being developed but I can show you the macro and how to interact with it:

https://github.com/anomalylabs/pages-module/blob/master/resources/views/macro.twig

The chaining you are seeing is how you set the options so structure().fooBar(value) set's the foo_bar option to value in the options collection.

For elementClass you are probably looking for linkClass. Also don't forget to escape with |raw!

Looks like this will give you your desired markup:

{{ structure()
        .currentClass('pure-menu-selected')
        .dropdownClass('pure-menu-has-children pure-menu-allow-hover')
        .linkAttributesDropdown({'class': 'pure-menu-item pure-menu-has-children pure-menu-allow-hover'})
        .listClass('pure-menu-list')
        .itemClass('pure-menu-item')
        .linkClass('pure-menu-link')
        .childListClass('pure-menu-children')
        .render()|raw }}

I just updated pages documentation too: https://pyrocms.com/documentation/pages-module — Ryan Thompson, Mar 25 '17 at 20:48

score 1 · Answer 2 · answered Mar 03 '17 at 19:52

Here's some information:

The very basic default looks like the following and will create an unordered list with all your existing pages. If you have set/toggled a page to be NOT enabled, then it will not show up.

{{ structure()|raw }}

Change the class of the list element
{{ structure().list_class('navigation')|raw }}

Change the list tag to something else than unordered list: {{ structure().list_tag('dl')|raw }}

Change list element

{{ structure().link_tag('dt')|raw }}

Show children of only a specific page

{{ structure().root('/my-page')|raw }} or page-id {{ structure().root('9')|raw }}

Set class for the element with children

{{ structure().dropdown_class('has-children')|raw }}

Set a class to every li item:

{{ structure().item_class('has-children')|raw }}

Set a class to the link

{{ structure().link_class('my-class')|raw }}

Add a title attribute to the link

{{ structure().link_attributes({'title':'Title attribute'})|raw }}

PyroCMS theme custom navigation structure

2 Answers2