Have you seen our video tutorials? Check 'em out!

Need help adding classes to the navigation

mazedlx - 6 days ago

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!

Answer

ryanthompson - 5 days ago

@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 ^_^

keevitaja - 6 days 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>

ryanthompson - 5 days ago

@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 ^_^

mazedlx - 5 days 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 :-)

lckamal - 3 days 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.

keevitaja - 3 days ago

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