FAQ: How can I EASILY create a multi-level responsive drop-down menu bar on a page?

Support
1

Hello,

Maybe it;s a newbie question, but certainly a FAQ:

How can I EASILY create a multi-level responsive drop-down menu bar (horizontal) on a page, extending downwards, on multiple levels the automatic menu that gets created by pages like user/pages/01.home?

And how do I do this on a secondary page, not the frontend one?

Thank you!
Răzvan

2

@rsandu, It depends…

  • Which theme are your using?
  • What type of page does /user/pages/01.home contain, eg. default.md, modular.md?

The default theme Quark generates an dropdown menu which is the same for every page.
image

Except… when you are using a modular page, the menu could either show the modules in the menu, or a regular menu with all pages, depending on the configuration of Quark.

3

@rsandu, Any progress?

4

To be honest, no: no progress. This is the main reason that stops me using Grav in production. I cannot find a way to easily create a multilevel drop-down menu, neither on the main (front) page, nor or the secondary pages.

The pages I want to use are standard (regular) Grav pages. I want mostly a static site, the simplest possible, with mostly text content (since the largest part of site will consist of a collection of books (online library), each one with an index page and separate pages for each chapter.

I don’t want blogs, comments, animations, reverse-chronological content etc. I seek for a way of organizing text content, with some pictures and/or videos here and there, web links… and that’s all. And most of the content (secondary pages) linked directly in the front page (in the main menu)…

And I need this whole site to be responsive, since people have to read the books easily, both on the computer and on the smartphone, with free-flow lines of text and easily legible fonts.

I’ve specifically choose Grav because I want to avoid maintaining a backend database. But I need a way to create horizontal menu bars without delving into the whole HTML/CSS trickery… becoming a webdesigner is not my goal here. I just want that content (books) showing up on Google, that’s all.

And I am deeply unhappy with most website “modern themes” (both in Grav and in Wordpress), with their centering of text on the middle third of the screen and putting non-essential elements or blank space on the rest (calendars, buttons, ads, etc.). A Wikipedia-like site suits me better, with text flowing all-across 80-90% of the page width. Unfortunately, most themes are designed for company presentation, with a lot of pictures and visual elements like “Our team”, “Products”, "Projects, “Contact”, etc.

Similar with what Grav has for the main menu, maybe creating folders and subfolders with numbered content, something like:

01.Home
02.Products
02.01.Cars
02.02.Phones
02.03.01.Samsung
02.03.02.Apple
02.03.03.Huawei
03.Projects
…

would be a better way create a multi-level drop-down menu in a simpler way?

In any situation, IMHO, the construction of multi-level menus in Grav worths a separate, explicit and detailed topic in the Grav manual https://learn.getgrav.org/

Thanks,
Răzvan

5

@rsandu,

Multi-level dropdown menu:
What is your idea of a “multi-level dropdown menu”? In what way is it different from the image I have shown above?

Do you have an example that shows your intention?

By the way, the menu I have shown is based on a folder with subfolders:

pages
├── 01.home
│   └── default.md
├── 02.typography
│   └── default.md
└── 03.dropdown
    ├── 01.childmenu1
    │   ├── 01.grandchildmenu1
    │   │   └── default.md
    │   ├── 02.grandchildmenu2
    │   │   └── default.md
    │   └── default.md
    ├── 02.childmenu2
    │   ├── 01.grandchildmenu1
    │   │   └── default.md
    │   ├── 02.grandchildmenu2
    │   │   └── default.md
    │   └── default.md
    └── default.md

Centering content:
The content of the site does not need to be centered the way you say. Quark for example has a setting to set the width of the content. It can be set to occupy the full width of the screen.

You might also look for a more minimalistic theme (see list of themes), but you will probably need a bit of tweaking of one of the Twig templates to achieve what you want.

6

@pamtbaau, thank you A LOT for your clarifications, that add a lot of light here :slight_smile: IMHO, it would be useful to explicitly mention this “folders and subfolders” scheme in the Grav manual.

Further, there is a small point to add:

From my point of view, a menu entry in the main menu bar may be:

  • another menu (second, third, etc. levels), containing other entries, recursively
  • a link to a page on this site
  • a link to a page on a different site

What if I want to show:

  • a menu bar (with drop-downs) on the main (front) page of the site
  • a different menu bar (with other drop-downs) on a secondary page (that is probably accessible from the main one) ?

Thanks again,
Răzvan

7

@rsandu,

Basics of a menu:
A menu is usually based on a collection of pages. Normally that will be the collection of children from folder ‘/pages’. The collection is passed by a page template to a navigation macro which then recursively loops through the collection it has received.

Your use-case:
If you create a template for your ‘secondary’ pages and that template uses a different collection of pages (eg. based on some taxonomy tags, or other page properties identifying ‘secondary’ pages), a menu will be constructed based on the ‘secondary’ pages.

With a bit of tweaking of the navigation macro, you could also add custom links to other sites. These custom links might eg. be defined in the header of the page at hand.