Hugo based website with widget menus also being dropdown menus?

Question

I am using the hugo-academic theme for a webpage. Is it possible to have a widget's menu link (from the homepage) also be a dropdown menu like this?

So when I am scrolling down the main page (homepage) it would highlight the widget I am seeing at the moment (as a hugo academic page would do), but at the same time, it is a drop-down menu in case I want to go to more specific webpages.

Answer 1

Here is an example if you want to put the "projects" widget in the home. You only need to put in the sub-menu url an # to link your widget

[[main]]
  name = "Projects"
  url = "#projects"
  identifier = "projects"
  weight = 1
  
[[main]]
  name = "Project 1"
  url = "#projects1"
  parent = "projects"
  weight = 1

[[main]]
  name = "Project 2"
  url = "#projects1"
  parent = "projects"
  weight = 2

If you have a widget_page "Project", you need to put the root project and then the #

url = "projects/#project1"

You can see my repo for an example: github.com/valentinaandrade/movid-site