How to create 'Quick Menu' as on Learn site?

[twye]

I am new to GRAV and using the learn2-git-sync) v1.5.8 theme

Question: how do I create the “Quick Menu” as seen in learn.getgrav.org? I don;t see any documentation how.

Example of the “Quick Menu” I am talking about

Theme Variables

I installed the page-toc plugin and by default the table of content show up on the top of the page.

I would like using the format shown in the “Quick Menu”

[hosios]

I would like to know this as well. I know there is some css envolved!

[spamhater]

Welcome @hosios

You might find it easier to download the skeleton and install in to a fresh directory

https://github.com/getgrav/grav-skeleton-rtfm-site or paul hibbits
https://github.com/hibbitts-design/grav-skeleton-learn2-with-git-sync

Also some more information can be found here on a similar question where Paul has replied in depth.

If you want to use the theme and then use ‘inheritance’ of the template, it allows you to adapt it further without affecting if the themes get updated.

Create navigation menu from markdown headers

Grav Community, I have a long reference page on my site. I’d like to add a menu (left, right, or drop-down) that is automatically generated from the markdown headers and allows the user to quickly jump to the section of interest. I’ve searched on the Grav documentation site and this Discourse channel, but haven’t found what I was looking for. My questions: *. Is there a resource or working example people can point me to? *. Can I restrict the menu to desktops (non-mobile) to prevent hogging u…

which will have pages showing you the data layout etc.

The basic information can be find in the template under the \user\templates\partials\sidebar.html.twig

But there is a a Table of Contents plugin (check the downloads → plugin and search for TOC which might be easier than recreating / dissecting the code.

After a quick looking at the theme. the code which produces the loop to go through the pages can be found here

It appears in the sidebar in the learn twig, under partials
templates/partials/sidebar.html.twig
the css styling can be found in the scss or css-compiled under

https://github.com/getgrav/grav-learn/blob/develop/themes/learn/css-compiled/template.css - around 2122

learn/blob/develop/themes/learn/css-compiled/template.css around line 2122)

[hosios]

Thank you, I’ll look into this.

[hosios]

I don’t know why (probably I’m missing something) but I can’t get it to work. I got the quick menu on my page, with the levels I wanted, but it is placed after the main content of that page (so, mainly useless). I got the css part working (well kinda - at least the numbering and font format and so) but not the placement.

I went trough all the recommended documentation, I looked at the examples, but no luck.

[spamhater]

Hi @twye , ok revisited and installed the template and I think you might be wanting not learn2, where the quick menu is not as standard but Learn4 which is the current styling of the learn system, which has the quick menu.

You can get it, but it still is in development , you can download it here.

getgrav/grav-theme-learn4

It is on a completely different css framework (spectre.css) which this and quark themes are based are.

Still need the trilbymedia toc plugin installed and activated.

trilbymedia/grav-plugin-page-toc

Try that first. Remember this is development template so will change a bit, if you are going to customize it , make sure you do in a inherited template, rather than changing the theme, because your edit / changes will be overwritten on updates.

Have a go and see what you get.

[hosios]

Now it is working, Thank you so much!