Dropmenu - how to limit number of pages?


I’ve duplicate the quark theme to have “mytheme” like explain in the documentation :
Theme Inheritance > Inheriting manually

1/ I have a dropmenu with many pages, I would like to limit the number of pages and sort them from the most recent to the most old.

2/ I also would like to have a page with the list of all my pages of a folder

It’s not so easy, I should do this in “mytheme” but how ?


I am not sure how to get the Twig Template to sort the menu properly but maybe a solution is use the Advanced / Folder Numeric Prefix and sort the pages placing the most recent at the top. When you add a new page, always make sure it is at the top of the order.

Then use some CSS to hide the items you don’t want on the menu. Change the number 5 to whatever number you like. That number will include the parent menu item as well so it you want to show submenu items, set it to 6.
.dropmenu ul ul li:nth-of-type(1n+5) {display: none;}

For showing the sub-pages in a folder, make sure to enable Twig processing and then use something like the following on your page.

{% for p in page.collection %}

{{ p.title|e }}

{{ p.summary|raw }} {% endfor %}

Hello tom0360,

Thanks for your answers.

for 1/

I decide to let the order like it is in the folder, I’ve tried :

.dropmenu ul ul li:nth-of-type(1n+5) {display: none;}

in the file : user/themes/mytheme/css/custom.css

The effect is to reduce the number of pages, that’s good, but I would like the last ones and not the first ones of the folder’s pages :

witch contains the pages’s folders :

I would like to have 2020_09, 2020_10, 2020_11, 2020_12

I don’t understand the syntax “nth-of-type(1n+5)” and don’t know how to do to obtain the last pages.

for 2/

I didn’t succed anything at all…
I’ve tried in the page itself and after I tried to create a new template

with the content :

{% extends 'partials/base.html.twig' %}

{% block content %}
    {{ page.content|raw }}

my list of pages :

{% for p in page.collection %}

{{ p.title|e }}

{{ p.summary|raw }} {% endfor %}

{% endblock %}

but no list appears… which documentation pages can help me ?

Is the menu sorted by date or by title? Would reversing the CSS so it removed 5 from the other end of the menu work or is the menu sorted alphabetically?

.dropmenu ul ul li:nth-of-type(n+8) {display: none;}

This would leave the first 7 menu items and hide the rest.

If your dropdown menu is in the same order and it looks like it is by the numeric prefix, the first code I gave you would hide the first 4 items of the menu.

.dropmenu ul ul li:nth-of-type(1n+5) {display: none;} would remove 001.2020_01
002.2020_02, 003.2020_03, 004.2020_04 from the list.

.dropmenu ul ul li:nth-of-type(n+8) {display: none;} would remove 008.2020_08, 009.2020_09
010.2020_10, 011.2020_11, 012.2020_12 from the list.

@thgr, Let’s approach this the Grav way…

Have a look at the docs and especially the ones about Page Collections and its methods.

In a default fresh Grav installation I’ve created 5 children below the home page:

├── 01.child1
│   └── default.md
├── 02.child2
│   └── default.md
├── 03.child3
│   └── default.md
├── 04.child4
│   └── default.md
├── 05.child5
│   └── default.md
└── default.md

In template user/themes/quark/templates/default.html.twig, I’ve inserted the following snippet:

{% for child in page.children %}
   {{ child.title }},
{% endfor %}
  1. Output: Child 1, Child 2, Child 3, Child 4, Child 5,

  2. Slicing: Collection::slice($offset, $length)

    • Get the first 3 in the collection:
      {% for child in page.children.slice(0, 3) %} --> Child 1, Child 2, Child 3,
    • Get the last 3 in the collection:
      {% for child in page.children.slice(-3) %} --> Child 3, Child 4, Child 5,
  3. Sorting: Collection::order($by, $dir, $manual)

    • {% for child in page.children.order('date') %} --> Child 2, Child 1, Child 3, Child 4, Child 5,
  4. Chaining order + slice:
    {% for child in page.children.order('date').slice(0,3) %} --> Child 2, Child 1, Child 3,

Using Collection and its methods you can create (almost) any collection you want. Either to order and slice a dropdown menu and create a list of child pages.

  • Dropdown menu:
    Use user/themes/quark/templates/macros/macro.html.twig as an example on how a menu is created.
  • List of child pages:
    Play with above snippet in a (new) template and be creative with the output. The blog related templates are a good example for this.


Thanks for taking the time to post a solution. I tried to figure it out with Twig Templating but have not spent anytime learning Twig yet. I am still learning how to work the basics of Grav. I was playing in the macro.html.twig file and was able to change the orders of the menu but that was as far as I got. I feel like I need a full training course on everything Grav to wrap my head around it all. For my First Grav project I decided to make a Directory website without using the Flex plugin. The Blog List and Item takes care of a bunch of the heavy work upfront but there is still enough work that I can learn a great deal putting it together.

@tom0360, Yes, there is a lot to learn about Grav, which means it has a lot to give…

Going through the docs from top to bottom (without grasping everything) to get a broad feel of Gravs possibilities is helpful.

Forget about the new and hyped Flex Objects for now. Grav already offers a lot/enough for the fast majority of websites.

Twig is quite essential if you go beyond the installation of a suitable theme. There are a few Twig intro pages in the Theme section of the docs.

Collections are inevitable when using blog and modular pages.

Having fun with learning/experimenting is important too! :wink:

I am enjoying learning and taking it slow. I feel like I am re-inventing the wheel at times. Many things that seem standard in other platforms require modifying templates to try and make work in Grav. I don’t fault Grav for it, it is a lack of my knowledge. I am sure in time, with a better understanding of how things work, building a website with Grav will be fast and the final product will be much lighter.

@tom0360, If you want to go fast, go slow…

And if you think things are awkward or clumsy, there probably is a better way… The dev team uses Grav for their own client projects, so they would have stumbled upon it too and solved it.

And don’t hold back on asking questions if you get stuck or in doubt.