0

I have a navigation menu with some of the buttons being hover dropdown menus. So when the user hovers the button, a dropdown opens below where they can select where they want to go.

Front page

Front page

Open dropdown menu after hovering

Open dropdown menu after hovering

I've also made it so the when you click the button itself (in this case "Cats😼"), you're taken to a sort of umbrella page for all the options in that menu. The page has a short description and then a sidebar with the same options from the dropdown menu.

Umbrella page for cats

Umbrella page for cats

On mobile, I have a hamburger menu which expands to take up the entire screen.

Expanded hamburger menu

Expanded hamburger menu

If you click on the dropdown menu on mobile, it expands with its own options allowing you to choose where you want to go.

Expanded dropdown menu in mobile

Expanded dropdown menu in mobile

My problem is that if clicking on the dropdown button makes it expand, then how will I allow the user to visit the umbrella page? I could make it so that the dropdown menu only expands when the user clicks the arrow, otherwise they're redirected to the umbrella page. But that's UX nightmare - unclear, small clickable area, etc.

Another option is to have all the dropdowns expanded at all times but that doesn't look as good and it can get quite long.

So what is an intuitive solution that doesn't clutter the navigation with too much information?

Improve this question

1 Answer 1

Reset to default
0

You could allow the user to expand the navigation menu and put the link for "All Cats" at the very top:

|_ 1.0 - Cats
   |_ 1.1 - All Cats
   |_ 1.2 - White
   |_ 1.3 - Yellow
   |_ 1.4 - Red
   |_ 1.5 - etc...

This technique is quite often being used by e-commerce sites (e.g. Zalando), other (non e-commerce) example here, suggested by @Harrison.

Another option would be just as you've mentioned - having all the dropdown links expanded on the smaller screens. It wouldn't clutter the navigation if you've used typography hierarchy correctly, I'd highly suggest you checking out how React Docs have achieved it here.

Improve this answer
1
  • 1
    Another example here is the mobile version of MDN (max-width: 991px) Commented Mar 25, 2024 at 9:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.