Multi-level Maali Navigation

Themes
1

Hi all!

This is the navigation.hbs file in Maali:

<ul class="nav{{#if isSecondary}} secondary submenu{{/if}}">
  {{#foreach navigation}}
    <li class="{{link_class for=(url) class=(concat "nav-" slug)}}{{#match label.[0] "-"}} is-subitem{{/match}}"
      data-label="{{label}}" data-length="{{label.length}}">
      <a href="{{url absolute="true"}}">
        <span>{{label}}</span>
      </a>
    </li>
  {{/foreach}}
</ul>

It places a subitem under an item in the primary navigation when “-” is added in the navigation backend.

How can I adapt this code so “- -” adds a subitem under a subitem?

So, for example:

Elections
- General Elections
- - 2024 General Election
- Local Elections
- - 2023 Local Elections

and so on

1 Like
2

Hats off to @brightthemes for the clever use of label.[0].

So I suspect you could also match on label.[1] to check for the second - (and add a sub-sub-item class), and then you’d need some additional css to style the sub-subitems, and probably some extra js for clickable menus on devices that don’t hover…

3 Likes