Should a button with a dropdown always have a click action?

Question

I have one button that offers the user up to ~10 choices. The button label says 'apply as' and the dropdown lists all the possible choices. I have multiple choices on how to design this.

As a hover, where the dropdown opens on hover. As a onClick, where the dropdown opens on click.

I think I will be going for the hover as it is most commonly used, however should the 'apply as' also be clickable in that case? I dont have anywhere where the user should go as they need to define their choice first. It feels wrong to have a button that is not actually clickable, but only function as a placeholder for the dropdown.

Whats your opinion / advice?

Mockup:

Answer 1

Should a button with a dropdown always have a click action?

Absolutely! Unless you don't care about mobile/tablet support which do not have a "hover state".

I'm a strong advocate of keeping things simple and not reinventing the wheel:

^{download bmml source – Wireframes created with Balsamiq Mockups}

If you decide to keep the hover initiated dropdown be sure to read the timing guidelines outlined here: https://www.nngroup.com/articles/timing-exposing-content/

Answer 2

For material, they have a segmented dropdown button

A segmented dropdown has two sections: the current state and the dropdown arrow icon. Pressing the current state will cause that state’s action to fire within the screen. Pressing the dropdown arrow will display all the state options. Selecting one will change the displayed state

EDIT

From your mock, this maybe more similar to a batch actions dropdown button you often see above a data table. Clicking the label of the button reveals the dropdown with the list of choices to initiate the action.

^{download bmml source – Wireframes created with Balsamiq Mockups}

You don't need an additional submit or apply button in this case, so it's 2 clicks instead of 3.

Answer 3

I have recently done some user testing on hover dropdowns, and there was a general expectation from users that the top level should also be clickable.

Answer 4

I would say it depends on the situation. The problem is accidental selection of the wrong option.

For example, say selecting something in the dropdown triggers a refresh of data with no/little performance overhead that doesn't perform any sort of update or submission. The user can then easily select another option, and it won't slow them down.

However, using your example, if the user accidentally selects teacher instead of student, they might be moved to a page with a form designed for a teacher. Now they have to go back and make another selection. In a case like this, where a form is being submitted, or a page refresh occurs, it's usually best to have a submit button.

Answer 5

Yes

But I've seen sites that remove the hover function and only have the menu display onclick which seems a bit senseless.

Edit: in your case, you're using the wrong object. It shouldn't be a button, but a drop down menu. Buttons are meant for onsubmit actions