Navigation: List all Modular pages in topmenu (Quark Skeleton)

Hey all,
I downloaded the current Quark themed Onepager Skeleton and try to wrap my head around the navigation logic. I already managed to understand how modular pages work in general and added a second modular page beneath “Home”. In the next step, I’d like to show this new page alongside the subitems of “Home” in the topmenu and when I visit the second site it should also show “Home”. This does not work yet, both sites just show their modular “children” in the top menu but not the other page. The folder structure, visibility… seem right to me. I had a look at the navigation.html.twig and macros.html.twig and assume the magic happens in the macros template, but I am not the biggest PHP/TWIG guru yet :slight_smile:

So the top navigation on each active modular page should be:

  • Level 2 Item of current active page = modular “child” page link 1
  • Level 2 Item of current active page = modular “child” page link n
  • Level 1 Item ANOther Page 1
  • Level 1 Item AnOther Page n

Maybe you can provide a source on exactly that topic (Building Navigations/Submenus) which I might just not have found yet? What do I miss?

Thank you very much for any help…
(Sorry I’m only allowed to post 1 image so I had to combine my screenshots, hope you can explore enough :-))

I need to add a new info to my question: The mobile navigation (resonsive resized in browser window) does show both pages, the “home” AND the “test mod page”. But in non-mobile version only the child pages of the current active page are shown in the menu.

@sahof You question has some similarities with a previous question about combining menu items in modular pages. You can view my response in reply #2.

My main issue with this approach is that I think this will create a less then optimal user experience: The user will get lost when jumping between inner modules inside a modular page. I see the following use cases where modular pages have a good fit:

  • Single-page website:
    When setting ‘onpage_menu: true’ in the frontmatter of ‘modular.md’, the menu would make it easy for users to jump to sections. The user starts with the header/intro to get context and can shortcut to sections of interest by using the menu. It feels natural to the user.
  • For multi-page website:
    I would switch off the ‘onpage_menu’ and show the page as a single regular page, next to links to other modular/regular pages.

@pamtbaau Thanks a lot for your answer. And for your opinion about the conceptual implementation of the navigation. Personally/from my experience I do not see any disadvantage, if there are two different pages, each with a jump mark navigation. Of course I’ll optically distinguish “jump mark links” from the “real links”. But even if it is not the best idea UX wise, there is still the technical question. :slight_smile: Because from what I understand I have 2 pages. Both checked “visible” for the menu.Folder structure seems right. In mobile navigation both pages are shown in the menu, on desktop they are not. Unfortunately I cannot relate to your answer to other post yet, it is very detailed and seems much more complex than my issue… I will look into it and do more research. Thanks again.

@sahof I may have found what you are looking for…

It will show the following menu structure:

  • If page1 selected: section1.1 - section1.2 - section1.3 - page2 - pageN
  • If page2 selected: page1 - section2.1 - section2.2 - section2.3 - pageN

If that’s what you are looking for, you can follow the following steps:

  • Create an inherited theme from Quark. If you don’t you will loose your changes when Quark is updated to a new release.

  • Copy file ‘user/themes/quark/templates/modular.html.twig’ into folder ‘user/themes/mytheme/templates/’

  • In your theme’s ‘modular.html.twig’, replace lines 34-45 with:

    {# Add loop though all toplevel pages #}
    {% for toplevelPage in pages.children() %}
        {% if toplevelPage.url == page.url and page.template == 'modular' %}
            {# For current page, show sub modules if it is a modular page #}
            {% for module in page.collection() if module.header.visible is not same as(false) %}
                {% set current_module = (module.active or module.activeChild) ? 'active' : '' %}
                <li><a class="{{ current_module }}" href="#{{ macro.pageLinkName(module.menu) }}">{{ module.menu }}</a></li>
            {% endfor %}
        {% else %}
            {# if toplevelPage is other page, create link to page and not submodule #}
            <li><a class="toplevel-page {{ current_module }}" href="{{ toplevelPage.url }}">{{ toplevelPage.menu }}</a></li>
        {% endif %}
    {% endfor %}
    {# add external menutiems defined in site.yaml #}
    {% for mitem in site.menu %}
        <li>
            <a {% if mitem.class %}class="{{ mitem.class }}"{% endif %} href="{{ mitem.url }}">
                {% if mitem.icon %}<i class="fa fa-{{ mitem.icon }}"></i>{% endif %}
                {{ mitem.text }}
            </a>
        </li>
    {% endfor %}
    

    I have added a loop around the original navigation logic. In the outer loop, we loop through all top-level pages. If the toplevel page is the current page and it is a modular page, we use the original navigation logic. Else we create a normal link to the other toplevel page.

  • The links to the other toplevel pages don’t work correctly yet, because of the javascript embedded in the page. We have to exclude the toplevel pages from this script.
    Change line 23 to:

    filter: ':not(.external):not(.toplevel-page)',
    

Desktop:
You should now see in the menu a list of all top-level pages. If the current page is a modular page, its sections will be shown in the menu.

  • If page1 selected: section1.1 - section1.2 - section1.3 - page2 - pageN
  • If page2 selected: page1 - section2.1 - section2.2 - section2.3 - pageN

Mobile:
On a mobile device, Quark shows by design only top-level pages and no sub-modules. So your observation is by design.

Hope this helps…

1 Like

@pamtbaau Thank you very very much! This was exactly what I meant. Thanks to your detailed explanation it works like a charm now. I just feel a bit stupid now, because I did not even have a look at the modular.html.twig but only in the two files I mentioned in my post. I guess it needs a bit more time and effort to dive into all this twig/php/templating stuff for me. Thanks again, I needed this little success for motivation to move on! Of course this now needs a different styling :slight_smile: (Right after the first if statement I inserted <li><a class="toplevel-page active-toplevel" href="#{{page.url}}">{{ page.menu }}</a></li> to also display the current toplevel item itself… )

Your added link looks good to me…

A little styling might indeed add to the menu. Maybe you could add an :after to the active toplevel page showing a stylish arrow indicating the following menu items belong to that page. Or adding some commonality to the menuitems of a toplevel page and its modules to indicate their relationship.

Don’t be harsh on yourself… :wink: Every new territory comes with a learning curve and needs some time to master. Besides… questions like yours force me to explore new area’s of Grav.