Dropdown link question

Design help General
1

Hi

If I use a dropdown element, is there a way to make the top level text a clickable link to a specific page aswell as have sublinks. Thanks

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

So for example:

On this page:
https://www.simplyadverse.co.uk/lp3/new-home

When someone clicks Why Simply Adverse in the top nav I want to send them to one page. If they click the subnav link for Out Latest Reviews, I want to send them to the reviews section on the page they are on.

Is that possible? Share link below. Thanks.

https://preview.webflow.com/preview/simplyadverse-website?utm_source=simplyadverse-website&preview=aaa8b347e22972176c3e4c02c8608f61

3

Just wondered if anyone could help with this please as it’s a bit of a showstopper for us at the minute. Thanks a lot.

4

hey @GrahamCox

You read-only link is broken, I’m getting a 404. Can you fix that and then tag me so I can take a look?

5

hi @gilson

Thanks for getting in touch, it’s much appreciated. My share link was switched off somehow, my apologies. Please try this link

https://preview.webflow.com/preview/simplyadverse-website?utm_source=simplyadverse-website&preview=aaa8b347e22972176c3e4c02c8608f61

Thanks, Graham

6

Hi @GrahamCox,

The dropdown element won’t allow that the top level to be linked. You need to add a separate text link (menu item) and insert a div block with your sub links inside (hide this). Then, use interactions 1 or 2 to display this dropdown wrapper when the top level link is hovered on.

Best,
Naweed

7

Hey @GrahamCox

What you wanna do is possible if you create the dropdown component by yourself. That way you can set the toggle as a link and use a hover interaction to reveal more options.

But this is NOT recommended at all, since you can cause a lot of trouble for users that are on touchscreen, since they won’t be able to access the hover effect if you already have a link on the toggle.

The two best ways I can think can solve your problem right now are:

  1. Repeat the top level item inside the Dropdown List move your list up to go on top of the item on menu.
  2. Separate the link from the dropdown toggle. I.e.: make the “About Us” a Link and the Arrow Right After, a Dropdown Toggle.
8

Hey @gilson

Thanks for all your feedback. We’ve decided to go down the option 1 route as realised what we were trying to do wasn’t exactly user friendly :slight_smile: Cheers.

Graham

9

Thanks Naweed for your help on this. We’ve decided to just make the dropdown links clickable to avoid usability issues.

10

Thanks for the update! @GrahamCox