docsy
docsy copied to clipboard
google
General purpose drop down menu in Docsy
I have seen articles on making a version drop-down in Docsy but so far have not found any way to make multiple general purpose drop-down menu items. For example:
Years Something else 2000 ABC 2001 XYZ 2002 1255 etc. etc. Thanks
Duplicate of #311
Not saying we shouldn't do it if there's a good use case (it would be easy enough to implement), but do think about this (from the other issue):
think about what your use case would be, and whether it will actually make it easier for users to navigate around your site - the Kubernetes Docsy site is very large and doesn't have drop downs except for where it gives you an entirely different version of the site, as provided in the template. It's also not obvious to me how you would show which option is currently selected in a top menu drop down (which is fine for language and version selectors as you can either version banner the entire site or you can see what language it's in), which means the user doesn't have an obvious visual cue like in the left nav for which bit of the site they're actually in/where to navigate back up out of it.
IMO for certain usecases (for example, showing a list of products in the menu that each lead to a specific page) the simple solution would be fine, as typically in such cases there is no left-side menu on the linked pages.
Yeah, if you're going in to a page with no left hand menu it might be simpler - would it be obvious to a user to use the Product (or whatever) menu they used to get into it to get out of it again? What would be on these pages? (if not documentation with a left nav?)
If you are building a site that's not for a single project (but for a set of projects, or a smaller organization like a startup or a nonprofit) then I'd say it's a pretty common usecase to have a number of dropdowns in the main menu, like products, resources, events (leading to webinars/demos/...), company (about us, career, ...) and so on. The left-side menu is common for the doc pages, but Hugo (and Docsy) allows you to build the entire site.
I'll have a look and see what I can find on other sites, and do share any good examples! IME technical sites that use drop-downs also often have a breadcrumb system to keep users oriented (see the Azure docs, for example - they use a lot of dropdowns but also have multiple layers of breadcrumbs so the user can see which subsection of the docs they're in/how to navigate out). We just have a single layer of breadcrumbs for docs sections.
(Also we need to bear in mind when prioritizing additions to the template/configurable elements that while people can and do use Docsy for all kinds of things, the main goal of the Docsy template is to make it easy to create sites with technical documentation...)
The Selenium docs use a drop-down for their About content, if anyone wants to take a look at how they did it: https://github.com/SeleniumHQ/seleniumhq.github.io/blob/trunk/website_and_docs/layouts/partials/navbar.html https://github.com/SeleniumHQ/seleniumhq.github.io/blob/trunk/website_and_docs/hugo.toml#L247
This site is using Hugo/Docsy and appears to have managed it: https://www.cloudwego.io/ - see the "Documentation" drop down on the navbar. It seems they are also doing something with the navbar.html partials: https://github.com/cloudwego/cloudwego.github.io/blob/main/layouts/partials/navbar.html
I would love this feature too.
It seems they have modified the navbar.html to build the menu based on frontmatter data set in the content files. Interesting.