Need help adding classes to the navigation

Created 7 years ago by mazedlx

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 }}

I need exactly that, but I want to assign different classes and 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>
            </ul>
        </li>
 </ul>

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

Thanks in advance!

ryanthompson — 7 years ago Best Answer

@mazedlx check this out: https://github.com/anomalylabs/navigation-module/blob/master/resources/views/macro.twig

The options in that view are a collection (hence the get / default appearance). To set them just use a camel case method to set them:

.activeClass('foo') // options.get('active_class', 'active') will return foo
.itemClass('bar') // options.item_class will return bar

You can continue formatting things this way. Sorry about the lack of docs - I've been on holiday but back at it. Docs are growing pretty consistently 😊

Link

keevitaja — 7 years ago

Hi,

I'm not sure how to do this with relational structure plugin, but you could just query all pages and build items manually.

This is an example for the links plugin:

        <nav>
            {% set links = links('footer').get() %}

            {% for link in links.where('parent_id', 0) %}
                <div class="item">
                    <h3>{{ link.title }}</h3>

                    {% for item in links.where('parent_id', link.id) %}
                        <span class="{{ item.class }}">
                            <i class="fa fa-chevron-right" aria-hidden="true"></i> <a target="{{ item.target }}" href="{{ item.url }}">{{ item.title }}</a>
                        </span>
                    {% endfor %}
                </div>
            {% endfor %}
        </nav>

Link

ryanthompson — 7 years ago Best Answer

@mazedlx check this out: https://github.com/anomalylabs/navigation-module/blob/master/resources/views/macro.twig

The options in that view are a collection (hence the get / default appearance). To set them just use a camel case method to set them:

.activeClass('foo') // options.get('active_class', 'active') will return foo
.itemClass('bar') // options.item_class will return bar

You can continue formatting things this way. Sorry about the lack of docs - I've been on holiday but back at it. Docs are growing pretty consistently 😊

Link

mazedlx — 7 years ago

Thanks @keevitaja and @ryanthompson for your support! Will try that. And @ryanthompson: PLEASE PLEASE PLEASE expand the documentation. The easiest tasks like formatting the menu etc are pretty hard to perform when almost everything is missing from the docs 😄

Link

lckamal — 7 years ago

@keevitaja - How do you set active class in this way? I made navigation items with url type but can't find way to make item active in this way.

Link

keevitaja — 7 years ago

@lckamal {% if item.current %}class="active"{% endif %}

Link

sylvanas — 7 years ago

how to disable dropdown ? how to set class for second child list class after first child list class?

how to merge links to this UL tag and this Structure method whiteout using another UL tag ?

Link