Hey all, I’ve been seeing a few topics on here discussing how to implement a drop-down style submenu into the navbar component with not much luck. I want to share with you a workaround that I came up with that seems to work well and is fairly easy to accomplish.
In this screenshot, you can see the structure of my navbar:
In this example, the first “navbar-link” has a submenu that appears on hover. Note: I have made my submenu visible only on desktop to avoid any funky behaviour on tablet/mobile devices.
Here’s how you get this to work:
Wrap whichever menu item you want to have a submenu with a div block (in this case, “submenu-trigger”) and give it the following settings:
- display: inline-block
- overflow: hidden;
- position: relative
For the :hover settings:
- overflow: visible;
Drop in another div block (“submenu-wrapper” in my example) and put your extra links inside.
My submenu-wrapper has the following settings:
- width: 200%;
- bottom left and right border radius;
- overflow: hidden (to give the last item the rounded bottom corners;
- position: absolute; top: 100%; (to sit directly below the submenu-trigger/regular navbar link)
- in the settings tab: set it to display only on desktop view to avoid any funky UX on tablet and mobile devices
And there you have it… That’s the basics of it. You can go even further and add some interactions to make it sexy.
For example:
- Make an interaction for “Display None On Load” and apply it to the
“submenu-wrapper” block - Make another interaction (“reveal submenu”) and apply it to the “submenu-trigger” block
- Give it a “hover” trigger and have it affect the “submenu-wrapper” class
- First step of interaction: give it a display: block; and height: 0 (with no transition);
- Second step of interaction: height: auto (with desired transition timing); to make it appear like an accordion as opposed to just appearing.
I hope this made sense and helps out anyone trying to make a drop-down within the navbar component (until the awesome folks at Webflow make this a standard thing).
