google / docsy

A set of Hugo doc templates for launching open source content.
https://docsy.dev
Apache License 2.0
2.55k stars 889 forks source link

General purpose drop down menu in Docsy #1673

Open GerBreOwn opened 1 year ago

GerBreOwn commented 1 year ago

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

LisaFC commented 11 months ago

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.

fekete-robert commented 11 months ago

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.

LisaFC commented 11 months ago

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?)

fekete-robert commented 11 months ago

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.

LisaFC commented 11 months ago

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

hurrellit commented 11 months ago

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.

fekete-robert commented 11 months ago

It seems they have modified the navbar.html to build the menu based on frontmatter data set in the content files. Interesting.