Making sub menus to appear as drop down menus at top

[ranjanmaria]

Is it possible to have drop down menu something like this in mkdocs-material theme:

By default, it seems material theme renders only top level menu below title with sub menus in left side bar. I am ok if left side bar is preserved. I just want to know if it is possible to have sub menus appear as drop down as shown in first image.

For more clarity:

[squidfunk]

No, Material for MkDocs does not and will never support dropdown menus due to their rather poor UX on touch devices and the inherent complexity due to how many different combinations of feature flags there would be for navigation.

EDIT: updated, explanation: #2198 (reply in thread)

[bradumbaugh]

@squidfunk I'd also find this feature useful.

Regarding your above comment about poor UX on touch devices, thanks for considering these things carefully—part of what makes this theme great.

That said, would it be possible to construct this feature so that, when rendered on mobile devices, the (theoretical) drop-down menu items become nodes in the existing hierarchical mobile nav (behind the hamburger button)? With this approach, there'd be no additional usability concern—just a layer of added depth. At a glance, it looks like the language switcher takes a similar approach.

Drop-down menus would be an extremely valuable way to break up a large / deep information architecture a bit further.

[squidfunk]

Thanks for suggesting. Yes, there are always specific cases where it might be beneficial to have the navigation structured in a slightly different way, e.g. by moving sub-navigation into dropdowns. Of course, this could fall back to mobile navigation, like it does with tabs enabled. The navigation and tabs partials already need to cover all cases that are supported by this project. Besides, the CSS for navigation is pretty complex (~700 lines including comments). Adding another layer of navigation on-top of this will further increase complexity. I have considered simplifying the current logic multiple times over the course of the last years and always came to the conclusion that it's not possible. The problem lies within the combinations of features, e.g.:

1. No feature flags – render sidebar navigation normally
2. Tabs enabled – render sidebar navigation for the current active tab, hide everything else
3. Sections enabled – always expand nested sections on 1st level and make them look like a headline
4. Tabs + Sections enabled – render sidebar navigation for the current active tab, hide everything else, but always expand nested sections on 2nd level and make them look like a headline
5. On mobile – always use the to the drawer

This is just an example. There are other parts of the theme that are similarly complex, but navigation definitely is one of the trickiest cases. Regarding your other question: the language and version switchers are completely detached from the navigation structure, and yes, they work on mobile.

So, to sum up, this project is like every other successful project - it has grown and adapted over the years where possible and has a significant amount of complexity. Things that might look easy from outside can make you tear your hair out when you start to implement them. Thus, I cannot consider adding dropdowns for the current version of Material for MkDocs. If this feature is crucial to you, I could consider the default MkDocs template which offers dropdown navigation.

As a future lookout: I'm planning to do alternative layouts that break out of the Materialishness and provide fresh new modern looks while retaining as much of the functionality as possible later this year, so I will consider adding dropdowns on one of those alternative layouts. Alternate templates will make it possible to "start fresh" in regards to templating and styling, so we can develop more solutions that keep the underlying logic of this project while providing distinct mechanics.

[bradumbaugh]

@squidfunk This is a great response—thanks for the detail. Given this theme's success, ease of use, fantastic UX, and flexibility and extensibility, you're clearly making the right decisions. I appreciate the insight into your thought process.

The feature isn't crucial for me, just a nice to have. I've been considering different strategies for an information architecture, and their associated trade-offs (number of top tabs and whether there's room for growth, section count, nested nav depth, in-browser search when sections haven't yet been twirled open, scroll bars, a perceived sense of content shift when clicking an item deep in a nav structure, whether I can make things granular enough so that I can easily extend content, etc.). Thinking this way, nav menus might be a nice tool to have—but definitely not crucial. The need is not so great that it overshadows this project's many other benefits!

Thanks again.