Drop-Down Menus

Hi there, I’m trying to create a top-level nav bar for my app with multiple drop-downs.

I’ve watched a few tutorials and, as far as I can tell, there are two ways to go about this:

  • Option One: A single element with the navigation links and a workflow to show/hide focus groups with the drop-downs. The problem? This element has to be 200px+ high to accommodate the drop-downs which blocks interactive elements/buttons at the top of your pages.

  • Option Two: One element for the navigation bar then add the focus groups with the drop-downs on the actual page. This solves the problem with Option One - but then you have to re-create this layout for every single page you want the menu to show on. And if you ever want to change the workflow/position, you have to do it for every page you’ve set the menu up on.

Is there another option I’m missing to create a drop-down menu like this?


Focus menu offset can be helpful