How to do this Dropdown

how to do this in webflow

----------css3-multi-level-dropdown-menu

Here is my public share link: LINK
(how to access public share link)

(Currently) You cannot create a 2+ level drop-down menu in stock webflow.

(Categories being level 1 - Graphic design being level 2).

You could create a series of positioned divs…
but it’s not easy to do… I’ve done this and it’s a pia.

So that leaves you with 2 choices…

  • use css or jquery to create a similar menu and insert them into your webflow project
    or
  • design your website to work on a 1 level drop-down menu… which is the route I’ve followed for almost all my webflow websites.

It comes down to need. If you really need that 2nd level… then you have to find a way to achieve it.

otherwise…

design the project to only need 1 level.

It’s such a shame that the drop-down feature doesn’t offer more functionality. This is so fundamental to website design where there are 10+ pages. Most of my sites are 50+ pages.

In addition to a 2+ level drop-down option it would be nice if the single drop-down had an option to fade down slowly instead of just appearing. This works perfectly in mobile, but has been overlooked for desktop for some reason. I’ve added this to the wish-list, but sadly isn’t getting any votes. I guess the majority of Webflow designers must be writing sub 10 pages sites, so are just not interested in drop-down menus at all.

1 Like

I have almost the same question. i need to have a sliding menu (that comes from the side of the browser) and in it there will be a search field (by category or brand) that will make a “prefiltered” result appear in a second div beside it… Can this be done by a trigger button? and interactions?

yd.

Hey @pnewest @iveduboua @Bailloh

TBH I’ve not had a client need a multi level nav in a while.

Now I have, I was a little shocked not to see native WF support for it.

However I have implemented it easily without interactions, just by adding a second DD.

Take a look at this template in DM for the how to - https://webflow.com/templates/html/folie-ui-kit-website-template

See Pages > UI Elements (and then second level flyout)

I just gave the DD list a new class and positioned it the same width as the length on the DD link.

Take a look how mine is - https://preview.webflow.com/preview/eformations?preview=fc9ed726a04e6e64d49f79273d92a5b8

Hope that helps.

Neat! The second level doesn’t work very well from a UX perspective. For touch, mobile devices it is better to use an onclick to open the second level for example.

couple issues when the screen size changes.

I saw this in Preview… probably better if it was tested on live devices.


wf-1


wf-2

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.