I have a nested sidebar that goes 3 levels deep. I would like the interaction to slide left/right:

enter image description here

So in this example, if you click on "Jobs" in (1), (2) would then slide in. My question is, when (2) slides in, should its first item be active by default?

I tried that interaction, but the problem is, if the user is creating a job (which would mean they're filling out a form), if they inadvertently click "< Back", then the entire screen is going to get replaced by the Home page.

An alternative is - if the user clicks on "Jobs", this sidebar switches to (2), but nothing is defaulted here. "Create Job" will only bring up that page if they explicitly click on it.


I'm not sure I understand this part:

if the user is creating a job (which would mean they're filling out a form), if they inadvertently click "< Back", then the entire screen is going to get replaced by the Home page.

However, to address the highlighting of a default item: IN GENERAL, you should never highlight or default to an option. Otherwise, you'd be creating cognitive overload by biasing a choice over other choices. Thus, the chance of accidental errors will increase since many users will click there by default (just as you name it!) or at least make users double think what are they supposed to do.

A perfect example, very similar to your user case is WordPress. I took a capture of what happens once you hover over Posts (same as would happen in your case where you hover over Jobs):

enter image description here

As you can see, nothing is selected by default. It just lists the available actions.


There might be more or less legit reasons to default an option. For example, if the KPI of your product includes to actually increase some engagement, you can default it. Some people may say it will border a dark pattern (and yes, you could use this as a dark pattern). But sometimes reasons may be legit. For example, if you need users to see some very important information first, while still leaving all available actions at one click reach.

An example of a legit reason would be the COVID-19 situation. You may have a tab with general information, but want users to see very important information first

UI concerns

One thing that stands out in your wireframes is that your options require to click an option and then go back to a previous state. While this is OK for mobile, I'd recommend to use hover for desktop. This way, you won't have any issues with users hitting back a back button.

Another thing: as I said, I don't fully understand your user case, but if I'm correct in what I understand, hitting back in a nested menu panel shouldn't take you to previous page, only to previous state of the menu. Thus, if you hit < Back in panel #3 it should display panel #2, and if you click < Back on panel #2, it should display the first panel, but you will always be in the same page, you shouldn't move away from it until you actually choose an action to perform or a destination in the journey. See a sliding menu example below, where the same behavior you mention happens without moving from the page:

enter image description here

or this one:

enter image description here

Nevertheless, as in everything UX, I'd recommend to test these behaviors and go from there

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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