We are mocking out new notifications and requests panels for our web app and I wanted to see if anyone had any ideas on a better way to represent this concept of a dropdown within a dropdown.

I don't necessarily think this looks bad, but I feel like there is a better way to handle this, however, I think of one. The list may either be a button of only 1 option is available for theoretically as long as a user would have accounts. Our largest group currently would have about 8 options.

enter image description here

  • 1
    Can we assume you won't be servicing mobile/touch clients? Apr 28, 2015 at 16:28
  • 1
    This is a responsive application with about 40%+ of traffic coming from mobile, so yeah it has to be. What I was thinking with mobile / smaller screens is setting it up so that when you pull down the notifications or requests panel the main content div will hide and in its place a full screen notification or request panel will be there. Almost like a "page" to itself.
    – nduvieilh
    Apr 29, 2015 at 15:35

3 Answers 3



Personally, I find this menu in a menu solution irritating. It comes with some inherent missed-click risk that could lead to accidental menu abandonment. It’s something worth testing, but I'd have another option to run it against.


I hate to critique other answers in an answer but ...
Drop in panel to modal pop up is far worse. You’re making the user jump around too much.


For scenarios like this, I’ve had good luck with sliding panels. It keeps the user’s focus in a tidy little space and adds a friendly animation into what might otherwise be a ho hum experience.

For those who haven’t used sliding panels, allow me to illustrate:

enter image description here

It just occurred to me that I left out one small but important flow detail. When the user makes their selection in the second panel, slide them back to the first and change the thing they took action on to confirm. It’s also nice to provide a mechanism to undo or configure properties of that action. I'll add to the image if I get a chance today.

  • 1
    And how does user comes back to previous slide?
    – Praasshant
    Apr 29, 2015 at 8:35
  • 1
    @pzv My apologies ... you include either a 'cancel' or back link, depending on the flow. Apr 29, 2015 at 16:27
  • @pzv image updated accordingly. Apr 29, 2015 at 16:35

You could have a wider box that looked like this:

| Lvl 1 Item 1 | Lvl 2 Item 1  |
| Lvl 1 Item 2 | Lvl 2 Item 2  |
| Lvl 1 Item 3 | Lvl 2 Item 3  |
| Lvl 1 Item 4 | Lvl 2 Item 4  |
| Lvl 1 Item 5 | Lvl 2 Item 5  |
| Lvl 1 Item 6 | Lvl 2 Item 6  |
| Lvl 1 Item 7 |               |

You could optionally hide the lower level of the box until a higher level item was 'selected' or hovered over.

Another option is using nested accordions:



I would do it with a pop up. Something like this. But there should be made some additional changes on the "existing team" or "own team". I would use a step sign up for this.

Dropdown -> "Join team" -> POP UP opens -> Select existing team or own team -> IF existing team -> show list of teams available, including sign up button -> ELSE -> own team, input for naming and a submit button.

Simple example of popup without the step sequence:

Simple example of popup without the step sequence

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.