Is it possible to create a drop-down menu?

[antoinemeyer5]

Hi,
I use your theme and it's great!

I have a question:

• Can we create drop down menus natively?
• If not, can we fork your project and try to add that?
• Is it complicated to do?

I take the architecture of your site as an example.
The idea would be to have a drop down menu when I hover over "Content".
Underneath, "Markdown Syntax Guide", "Rich Content", "Placeholder Text", etc. would appear.
Of course we could say which articles we want or don't want to see in the drop-down menu.
The "Content" page would still exist and be clickable.

Thank you in advance for your answer,
Code-dially

[willfaught]

Hi @antoinemeyer5, it's not currently possible in Paige, but I assume it's technically possible to add it. I haven't looked into whether Hugo can do hierarchical menus, but assuming it can, then I imagine it would be straightforward to map that onto Bootstrap dropdown menus in a nav/navbar. A complication might be getting it to work on mobile. See menu.html for how the menu is implemented.

Feel free to submit a PR. The general approach in Paige has been to use stock Bootstrap styles and widgets as much as possible.

[willfaught]

I use your theme and it's great!

Links to deployed sites are encouraged! :) See #12

[willfaught]

Looks like it would need to be this: https://getbootstrap.com/docs/5.3/components/navs-tabs/#pills-with-dropdowns

[willfaught]

See also: https://gohugo.io/templates/menu-templates/

[willfaught]

@antoinemeyer5 This feature was added in the latest release.

[StarkZarn]

Did the hover feature for top level dropdown menus ever get added? I can't seem to get that working. All of my top level menu items in dropdowns appear as links that require clicking to activate the dropdown.

[StarkZarn]

Reviewing some bootstrap ideology, it looks like they don't believe in hover menus, so that might have bled over here. I'm still confused as to the links, pills, tabs, etc. menu styles though, that don't appear to do anything for me.

[willfaught]

You're right. Paige uses the default Bootstrap behavior, which doesn't have hovering.

I just tested menu styles on the exampleSite, and they worked for me. What config file and syntax did you use?