How to enable or create a drop-down menu from blog items on Mache theme

Hello, I use Mache theme, it is very nice,
I used the blog section to place there only the products pages, I like the way the blog presents and paginates the products.

I looked into Mache menu.css and style.css files and I do not see drop-down menu styles. My question is, is it possible to enable a drop-down menu for the blog of Mache theme? ¿How?. If not, is there a tutorial on how to create a drop-down menu for the blog items of Mache theme?.
Thanks and regards

Had a quick look at this theme for your question, the site.css does not include any dropdown menu options / theming.

What are you trying to achive with the dropdown (how will the user interact with it, what will the sub / dropdown menu items be, what will they to relate to. If you can give us a bit more information I should be able help you

Hello @spamhater and thanks for your reply. I would like to do same as with Deliver Theme, where the drop-down menu can be set to on and it takes all blog categories of all articles and it creates a sub-menu with them grouping the articles with same category under the corresponding submenu category. Same as with Deliver Theme, I do not know if I explain myself well.
Thanks for any information to create such type of menu on Mache Theme.


[…] Deliver Theme, where the drop-down menu can be set to on and it takes all blog categories of all articles and it creates a sub-menu with them grouping the articles with same category under the corresponding submenu category.

Could it be you are mistaken? I don’t believe theme Deliver does have such dropdown menu. Yes, it can create a dropdown when setting dropdown: true and when all blog item folders have been given a number (to make them visible). However, the dropdown is not grouped in categories.
I also don’t find any functionality for that (dropdown grouped by category) in the templates (partials/navigation.html.twig).

@joejac, do you have a visual example of something you have seen it doesnt need to be a grav theme ?, as @pamtbaau and I did say, both of these themes do not have a drop down menu as default. A theme doesnt automatically create dropdown menu by just enabling the dropdown : true in a yaml/blueprint, it has to have template code and css “made” to get it working.

It sounds really weird on what you are actually trying to achieve, blogs usually have lots of posts, which would make a drop down menu rather big, rather quickly. You can have a potentially menu of catogeries under the blog menu

Can you come back to us with a few links of the thing you have in your mind and we can then potentially get some code to add to the themes


Ok after having another look I think I may have cracked it without rewritting the theme.

This method should be used on any theme you want to adapt.

Go to the theme folder (Mache)
edit the template yaml file (mache.yaml)
add the line

  enabled: true
  directory: '/blog'
  title: Blog

and save the file

Then go to the themes partial folder and look for the navigation.html.twig (/user/theme/mache/templates/partials/navigiation.html.twig)

In this themes case we are adding this new bit of new code after the first {% endfor %}

    {% if theme_config.blogonmenu.enabled %} 
        {% set current_page = ( or p.activeChild) ? ' active' : '' %}
        <li class="menu-item{{ current_page }}">
         <a href="{{ }}">{{ theme_config.blogonmenu.title }}</a>
    {% endif %}

So the file (navigiation.html.twig) will look like this

{% if page.template == 'modular' %}
    {% for module in page.collection() if %}
    <li class="menu-item{% if loop.index == 1 %} active{% endif %}">
        <a href="#{{ module.folder|trim('_') }}" data-scroll>{{ }}</a>
    {% endfor %}
    {% if theme_config.blogonmenu.enabled %} 
        {% set current_page = ( or p.activeChild) ? ' active' : '' %}
        <li class="menu-item{{ current_page }}">
         <a href="{{ }}">{{ theme_config.blogonmenu.title }}</a>
    {% endif %}
{% else %}
    {% for p in pages.children.visible %}
    {% set current_page = ( or p.activeChild) ? ' active' : '' %}
    <li class="menu-item{{ current_page }}">
        <a href="{{ p.url }}">{{ }}</a>
    {% endfor %}
{% endif %}

Save this and you should be good to go.

How it works / What it is doing

The new code, check if in a .yaml in the root of the themes folder has a set of parameters for a variable called ‘blogonmenu’, if it exists and isenabled, the front page of the site will add a menu item at the end of the existing menu layout and looking at the directory / url / link / route it will require (directory in the yaml) and also the wording in the menu you would like it to display (title in the yaml)

You should be able to reuse this snippet and quickly add the blog to most single page templates.


On the blog page, the navigation will change to a reduced menu, this is due to this template is a designed as a “single page layout” rather than a “multi page site”. I am not sure what you would like to have appear here, so for the moment it will just toggle between the two.

Have a go with the other theme (Diverse) and you should be able to follow the steps and use it that theme.

Let us know how you get on.

1 Like

1.- Thanks a lot for your time in your detailed solution @spamhater , I will try it tomorrow, and I will let you know the results.
2.- Yes, you are right @spamhater the menu gets bigger, but I use this type of blog and dropdown combination using the categories tag for small websites with a small amount of products and it works with Theme Deliver @pamtbaau . I like the way products looks with the blog format and pagination. I do not use it for blog indeed, only for products.


@spamhater, I’ve taken a quick look at your suggestion and have some remarks…

First of all, the proposed solution doesn’t answer the question of OP. All the script is achieving is adding an extra menu-item to the blog page when the current page is a modular page. No dropdown-menu for categories/blog-items is being created as requested by OP.


Go to the theme folder (Mache) edit the template yaml file (mache.yaml)

The script suggests to edit file /user/themes/mache/mache.yaml, which in fact is a bad practice. These changes will be lost when a new version of Mache arrives. Changes of the config should be done in /user/config/themes/mache.yaml


Then go to the themes partial folder and look for the navigation.html.twig (/user/theme/mache/templates/partials/navigiation.html.twig)

Again, same bad practice, all changes in the folder of a theme will be lost when a new version of the theme arrives. When making changes to a theme’s template, an inherited theme should be created.


{% set current_page = ( or p.activeChild) ? ' active' : '' %}

The value of current_page will always be '', because variable p isn’t defined anywhere… Besides that, since the current page is a modular page, the menu-item for the blog can never be active anyway…


<a href="{{ }}">{{ theme_config.blogonmenu.title }}</a>

The script suggest, as an example, the url directory: '/blog' in the config file. The result of the Twig snippet will then become: <a href="/blog">Blog</a>

  • When using this on a site using a subfolder like localhost/mysite, or https://domain/grav, it will fail because localhost/blog, and https:/domain/blog does not exist.
  • Also, when using a multi-language site, the blog url could be https://domain/en/blog or https://domain/fr/blog which depends on the language of the user. Also in this case, the generated url will fail.


This method should be used on any theme you want to adapt

Not all themes are designed equally…

  • The logic for building navigation differs
  • The script uses Twig variable theme_config, which is not defined in all themes…


this is due to this template is a designed as a “single page layout” rather than a “multi page site”

Theme Mache, is not designed as a “single page layout”. It supports equally well modular pages, list/blog pages and default/regular pages.


You should never ever edit theme files directly. The suggested approach will last only until the first update of the theme. If you want to extend templates, you should inherit the theme you want to extend, use it and extend what you need there

1 Like

Hi @pambaau, @karmalakas , thank you both for your comments.
Firstly I want to make it clear, I am not a professional developer, but someone who is looking to learn and full understand grav,

All the comments are fair comments and all need to be tackled. I just know that joejac wanted to try and achieve something as a start place, the original question was one of those questions where someone just needed to work differently.

Yep, ok its clear that I need to create a inherited theme before doing any changes, which I will look in to doing.

Yep there is no drop down option for the blog items, but I wasn’t sure if he just needed a menu option or a drop down as it was a bit unclear without visualization, due to the themes chosen don’t support this naturally.

  1. & 3.

Ok the location of user/config/themes is something, that I didn’t think about, but that makes sense and can see it is a better practice.
I will go and play with this from this point further.

  1. Again from lack of structure learning or long term hands on, I did use antimatter (or a theme which has as a reference to drop down) as many of themes I have looked at in my learning, don’t seem to tend to by single page site.

5 and 6 That is a great point , looking at the bigger picture :slight_smile:

  1. Yep the person who adapter the theme has made it so that grav support the other pages , but the original theme was designed as a single page theme Mache Theme Original

Just the menu options and navigation hasn’t got a fully featured menu system that includes drop down / sub menus, the optional blog function, so I apologies for maybe “for poor grammar / explanation” I do find sometimes my dyslexia can obscure my clarity.

With the theme being 3 years old, it looked like it wasn’t been maintained, (one of the things I have personally found with a lot of stuff with grav, that people dip there toe in too it and for what ever reason “move on”.

I do know from the original post, the end goal hasn’t been achieved as now it been clarified Joe wants a drop down menu and use taxomites / categories to reduce the memory items.

I will go off today and have another ago of get something working, using the points in the discussion from you both and apply them. It will still not maybe be perfect but happy for the input.

Thanks for you both taking the time to reply.
Lets hope v2 will be a bit more in line with your best practice outlines and give joe a good working practice solution which can be used to transfer to other themes.

Thanks all :slight_smile: coffee time and a bit more reading !


@spamhater, I’m glad you’ve taken the feedback as learning points and not as flames.

And know that your enthusiasm for creating a solution for a fellow community member is appreciated. From personal experience, I know the questions posted on the forum will take you into every corner of Grav and will enhance your knowledge/skills.

but I wasn’t sure if he just needed a menu option or a drop down as it was a bit unclear without visualization

Learning point:
Don’t build anything for a client (aka. community member) if it isn’t clear what the client needs… Unless, prototyping is required to reveal the needs of the client.

one of the things I have personally found with a lot of stuff with grav, that people dip there toe in too it and for what ever reason “move on”

Yes, I’m surprised to see how easily plugins and themes are being offered to the community and being abandoned without any notice.


Hello and thanks to all of you for dedicating your valuable time in response to my question. I do not know if I expressed clearly what I would like to do, English is not my native language and I am not a programmer. I will provide an image.

Special thanks to @pamtbaau for your diligence to answer promptly, since his answer saved me time in testing, because I would not be aware that it would not work as expected.

What I did with the Deliver theme is not ideal, I know, but it works. An not only I have the drop-down menu, I also have the blog blocks that shows the categories list with the number of products inside each category, and also the full products list below. Very handy, unfortunately this setup forced me to duplicate pages, which is not ideal, I did not know how to solve it, forgive me, I am not a programmer, but it is working.

In this case of Mache theme, I do not need the categories and products blocks located in the “sidebar-content archives” classes of Deliver theme, Mache does not provide them, but it does provides a nice display grid of 3 or 6 products, plus the pagination, I love it.
This is the image of Deliver with drop-down menu, sorry the website is in Spanish:

Mache Theme (V2)

Been working on the theme, I am now have a working drop down model made accessible. It needs a bit of tweaking with the css styles and optimizing a bit to remove some redundant css and the background of the menu when being accessed for the modular page (transparent) and then on a default page (black header).

So taking it further to achieve your goal.

  1. Firstly the page you screenshot, can that site be made available for me to look at it working and get to see how it interacts.

  2. Will you be using the modular front page as a landing page / single page like the original mache theme was designed ?

  3. Are you basically looking for the same site structure used in your screen shot site

  4. Are you looking to upgrade the theme from diverse to mache ?

  5. With the blog, how are you organizing your data which is displayed in the menu? Presume with using particular blog tags

  6. What is a realistic drop-down going to encounter in items as too many items will have the menu appear off page. Are you wanting a physical limit adding to the sub-menu ? Are you looking it also to display it in some sort of date order, so the blog menu show categories which are current over display by a default / sorted order.

  7. From the example the site looks like it has been designed with only desktop screen, due to the real estate which it is occupying. How are you wanting a mobile / reduced / responsiveness work

  8. If using the landing page style, Where do you want the blog menu be available from? From the front modular / page on wards or buy

  9. How will you be organizing your other non-landing pages, how will they be accessed, from a modular front page section. How many other page / sections / menu items will you be looking to display ?

  10. Can you create / use some existing page data where it will reflect the blog articles and how you want the drop down menu to work with example of the categories and how you are structurally wanting the information displayed

There is a lot to go for before I can write the logic and take the theme further and relies on your input / demo pages / site links of existing / similar site you have available.

I am happy to try and take this further, but need your direction, expectation levels as I using this as self development in to grav, themes but I am don’t want to be doing lots of changes at every stage to accommodate what you decide afterwards, as I have only so much free time.

Clarity will be the key here.

Currently I am doing the theme as inherited now as pointed out by the points raised and best practices.

Hope this helps and look forward to delivering something that meets your current needs. :slight_smile:


1 Like

Hello @spamhater, thank you for your time to respond.

  • Your point 1:
    I will send you the link via private message.
  • Your point 2:
    Yes, I try to keep the theme as it is, I only change images, and text, but in this case, a dropdown menu for the blog items is nice to have.
  • Your point 3:
    I will maintain Mache’s original site structure, changing only the content, and adding only the dropdown menu to the blog, if possible.
  • Your point 4:
    No upgrade, I am not going to change Deliver theme by Mache, no. The Deliver website is fine, as it is shown in the screenshot.
  • Your point 5:
    With Mache, I would like to have the possibility of a dropdown menu.
    To have an idea, this can be the breadcrumb:
    Productos (Blog) > Category (from Taxonomy-1rst Dropdown) > Tag (from Taxonomy-2nd Dropdown) > Web Page(s)
    – Let me explain:
    Your image of MacheV2 is exactly what I need in order to organize the blog pages into the dropdown menu using the taxonomies, these are the levels of the menu:
  1. In the Horizontal first level is Blog, I renamed Blog by Productos (Products in Spanish)
  2. Under Products, the second menu level is the first Dropdown level in my screenshot example, it goes from the first item Termoacusticas to the last one Linea Pavco, these are all the Categories of the Taxonomy.
  3. If there is more than one page under a certain Category I create a tag or more tags if I have products that have different characteristics but belong to the same Category. So the third menu level is the second dropdown level, displaying the Tags that are defined under their corresponding Category. In the screenshot example, the Category Policarbonato has two Tags: one is Acanalado and the other is Alveolar.
    Please note that under a certain tag the blog section can have more than one page, this is the beauty of the blog feature, one menu item in the third level can have multiple web pages.
  • Your point 6:
    6.1 No limits to the number of menu items.
    6.2 Display order: I would love to have priorities from 1 to 10, but it will introduce more complexity to the programming of the menu and web pages on the admin module, so ordering from recent to old dates is fine. Recent new blog items (products) go first.
  • Your point 7:
    The screenshot is from a desktop, but Deliver Theme is mobile-friendly, I mean responsive. You will see it with the link.
  • Your point 8:
    Must be visible con the navigation section as it is now, for module _updates as well as on the blog (Products in my case) page, I do not know if it is possible because updates, that shows the first 3 blog list_summary and their main image, is a module of the home page.
  • Your point 9:
    I guess nothing else, the blog (Products) will be the only place to modify pages, add or delete products. If something will be added, like a real blog, would be another blog section, the navigation bar has space for a couple of items more, but I do not think is going to expand beyond the Products section.
  • Your point 10:
    I will comply with Mache’s blog format, no changes to the way Mache displays the information, only add to the Home and Blog navigation bar the possibility to have dropdown menu only in blog (Products in my case) items, as explained on point 5 above. The information will be displayed within Mache format.

I need something simple, I do not want to cause any trouble, if it is time-consuming for you, don’t do it unless you are going to use the Mache theme for yourself and like to have a dropdown menu.

Please bear in mind that Deliver theme already has a dropdown menu, perhaps it would be a good idea to adapt the dropdown code of the Deliver theme to the Mache theme. I do not know if it is feasible.

Again, thanks for your time and disposition

Joejac thanks for taking the time to reply, I am sure we both can get this working and what you need.

Will wait on the link, but I will say if the products menu / blog code is working , yep it will be good to see how you have adapted to your needs and then getting it working with menu. I will look at the deliver code and use that as a start reference.

As regards time and using the theme, I been looking at ways of seeing what grav and my skillset is capable off, so don’t mind focusing some time to it, but it might me a few days to do something a pro developer can do in a few hours :slight_smile:

Looking forward to the challenge :slight_smile:

1 Like

@spamhater, I’m afraid this is going to be a very long post…

Since this development process isn’t really adding value to this post, would it be an idea to clone Mache into a Github repo and continue the discussion over there?

If community members do have interest in the entire process, they can follow the project on Github.

Then, when ready, a resume could be feed back into this post.

@pamtbaau . I can see your point, will take the conversation privately until I can reveal something, as you say.

Will look at how to work out, how to get it working with git.

As always thank you for your input :slight_smile: