Is it doable to implement dropdowns for navigation tabs?

[Andre601]

Was wondering, if I could change the generation of Navigation tabs in such a way, that if there is more than one page under the section, that it would add a dropdown indicator (i.e. down arrow) that can be clicked to list all sub-pages of the category, that aren't the first one.

I believe this could improve the overall navigation for my site(s), as the user would have an easier way to directly see all the sub-pages there are, without having to go to that section first.

[kamilkrzyskow]

Hello @Andre601,
sure, should be possible with customization overrides:

• https://squidfunk.github.io/mkdocs-material/customization/#additional-css
• https://squidfunk.github.io/mkdocs-material/customization/#extending-the-theme

The templates you'd need to target are likely limited to:

• tabs.html
• tabs-item.html

In the tabs.html the template goes over every nav_item {% for nav_item in nav %}
In the tabs-item.html the template renders the first found nav entry without any children.
You would modify it to make use of the nav_item.children and render them as well in the drop down structure.

In the nav-item.html render function there is also a settable level param to keep track of the tree level.
It starts off with 1 in nav.html, you could use the same idea in your tabs customization to limit entries to a set level.

There are different ways to implement a drop down, but the best approach would likely be using HTML without the need for JavaScript rendering:

• https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp

Having said all that, I have no idea how to do it properly taking accessibility into consideration and choosing proper styling to match the rest of the site.
That will require some tweaking during the process. Good luck ✌️

[Andre601]

Thanks for the reply.

Looking at the tabs-item.html template, I can see that from my understanding, it would usually make nested items if a nav item has children (Which I understand as not just having a single (index) page, but others too.), but given tabs usually don't display any sub-pages, I assume that the provided nav item is stripped down here...

Or I miss something important that makes the template differenciate between the tabs and like the nav links on the side of a page, because iirc does it actually use this macro for these links too.

[kamilkrzyskow]

I didn't run this now to check, just a quick drawing, so I hope I'm correct 🤞

tabs-item.html has a recursive render macro which finds the first element without children.

In mkdocs.yml nav is a list of dicts, {% for nav_item in nav %} goes over the top level list items.
In case of the Material theme it's Home, Getting Started etc.
Then for each of those it checks if it has children, Home doesn't so it is used as is.
As for Getting Started it does have children, so it looks for the first entry within it that does not have children, and that would be the Installation.

The render_content macro has the ref which is the source of the title, so even though the link is to the other file the title is taken from the Section title and not the Page title.