Need help adding classes to the navigation
Created 8 years ago by mazedlxI'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!
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>
@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 barYou 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 😊
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 😄
@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.
@mazedlx check this out: https://github.com/anomalylabs/navigation-module/blob/master/resources/views/macro.twig
The
optionsin that view are a collection (hence the get / default appearance). To set them just use a camel case method to set them: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 😊