Menu: 3rd level or just sub sub menu

Hey!

I´m trying to create a menu with a sub sub menu. But it doesnt show me the sub sub menu on my menu - even I active this pages to “visible page”.

Main

  • sub 1
  • sub 1
    • sub 2
  • sub 1
  • sub 1
    • sub 2
    • sub 2

So I opened the menu.php file and found out: Theres is no script for this (?)
In the docs I found : https://getkirby.com/docs/cookbook/menus#sub-menu
But this simple add a sub menü somewehre on your site, where you´ve placed this script.

Is there any way to add the third level to my menu?

You can use the treemenu snippet. Save it as a new file in /site/snippets/treemenu.php and call it in your header (or wherever you want it) like this:

<?php snippet('treemenu') ?>
1 Like

Didnt get it. How could this script help me out?
This script will just show me the first level. I want to integrate three levels in my menu.
Isnt this possible?

No, this script shows all levels, it is a recurring script.

1 Like

This does work, I have used to build multi level drop down menus. There is a little more info on it in the repo for the snippet.

1 Like

This is the result of the snippet when used on the StarterKit page structure (with an additional third level page added to “Project A”. As you can see, the script adds a level based class name to every li element to facilitate styling:

<ul>
    <li class="depth-1">
    <a href="http://localhost/k258a/projects">Projects</a>
        <ul>
    <li class="depth-2">
    <a href="http://localhost/k258a/projects/project-a">Project A</a>
        <ul>
    <li class="depth-3">
    <a href="http://localhost/k258a/projects/project-a/third-level">A third level page</a>
      </li>
  </ul>
      </li>
    <li class="depth-2">
    <a href="http://localhost/k258a/projects/project-b">Project B</a>
      </li>
    <li class="depth-2">
    <a href="http://localhost/k258a/projects/project-c">Project C</a>
      </li>
    <li class="depth-2">
    <a href="http://localhost/k258a/projects/project-d">Project D</a>
      </li>
    <li class="depth-2">
    <a href="http://localhost/k258a/projects/project-e">Project E</a>
      </li>
  </ul>
      </li>
    <li class="depth-1">
    <a href="http://localhost/k258a/blog">Blog</a>
        <ul>
    <li class="depth-2">
    <a href="http://localhost/k258a/blog/extending-kirby">Extending Kirby</a>
      </li>
    <li class="depth-2">
    <a href="http://localhost/k258a/blog/licensing-kirby">Licensing Kirby</a>
      </li>
    <li class="depth-2">
    <a href="http://localhost/k258a/blog/content-in-kirby">Content in Kirby</a>
      </li>
  </ul>
      </li>
    <li class="depth-1">
    <a href="http://localhost/k258a/about">About</a>
        <ul>
    <li class="depth-2">
    <a href="http://localhost/k258a/about/bob-meowerly">Bob Meowerly</a>
      </li>
    <li class="depth-2">
    <a href="http://localhost/k258a/about/brad-kitt">Brad Kitt</a>
      </li>
    <li class="depth-2">
    <a href="http://localhost/k258a/about/cat-winslet">Cat Winslet</a>
      </li>
    <li class="depth-2">
    <a href="http://localhost/k258a/about/hunter-s-tomcat">Hunter S. Tomcat</a>
      </li>
  </ul>
      </li>
    <li class="depth-1">
    <a href="http://localhost/k258a/contact">Contact</a>
      </li>
  </ul>

(Note that the repo @jimbobrjames linked to contains stuff for Kirby 1, so while the treemenu snippet can still be used, other stuff in that repo is no longer compatible with Kirby 2).

Edit:

If you don’t see all levels in your menu:

  1. Make sure that all pages you want to show in the menu are visible or change the snippet accordingly.
  2. Check your source code, if the levels are really not there or just not visible in the browser.
  3. The key here is to save the menu as a snippet, otherwise it won’t work, because the snippet is called from within the snippet.
1 Like

Thanks for your reply.

No it does not work. I even kicked off the whole CSS to avoid all possible “display: none”`s.
I placed the script in a snippet, in the very basic template and in a content site. All site are visible, of course.
But nothing is showing. Only the first deph :-/

There must be something wrong, then. If you want, you can PM me a download link to your zipped project.

I guess the script is buggy. I´ve now downloaded kirby, uploaded it on my webspace and placed the the script in a file ‘submenu.php’. Copy it into folder ‘snippets’ and placed <?php snippet('submenu') ?> in the header file.

After that I create three levels von content files.

And guess what? It still not working. I dont change anything in Kirby.
Does this script only works on “projects” templates?

Mybe it does not work with the latest version of kirby?

I can assure you that the script does work, even in the latest Kirby version. The results I posted above - the html and the frontend menu - are from putting the snippet in a 2.5.8 StarterKit.

So what can I do more than I´ve descripted?

I offered to look into your project.

1 Like

There is no way to send you a PM in this forum! O_O

…I mean to hook up a file!

Click on @texnixe name above one of her posts, and in the little popup press the big green message button :slight_smile:

1 Like

Thanks jimbobrjames - but its not possible to add a zip file (jpg, pgn, gif are allowed…)

@dedani I sent you a private message with my email yesterday.

Thanks you very much - I´ve send you a zip file.

Posting solution here as well for reference:

The problem with your snippet is that you called it submenu.php instead of treemenu.php but failed to rename the snippet call within the submenu snippet, which is still called treemenu. Since this snippet now does not exist, the recursive pattern can’t possibly work.

Either rename your snippet to treemenu.php or change the snippet call within submenu.php to snippet('submenu').

1 Like

Big thanks to texnixe - you helped me out.
It works now.