The problem with patterns is that it’s hard to stand out when you’re doing the same thing everyone else is doing. But you don’t want to deviate too far from functionality with something as important as navigation. You need to find that sweet spot right between familiarity and creativity.

While thinking outside the box is usually a good idea, but there are some rules that you just can’t break. These are the navigation principles.

• Simple
• Clear: Alignment and Placements of Parent and Child Links
• Consistent
• Smart Reflex: Smart On-Click and On-Hover reflexes.

Your scenario:

1. Should they get Collapsed Automatically?

Yes

Explanation: Try less to confuse or making hard for users to navigate through your application. Collapsing the previous helps users to know where application needs users attention.

Showing unnecessary items could mislead or misinform them.

2. How is this scenario handled from a UX perspective?

Yes

Explanation: Having a look from perspective of UX, again it is best practice to collapse them due to two reasons:

1. Unnecessarily possible of scroll bar to appear

It may be possible that due to allowing all parent menus to remain open, which brings in the vertical scroll-bar(According to your case). Scroll bar is not god to appear here as it's not helping user or look and feel in anyway, its just useless in here(depends case to case). Instead it makes users to do more than just what is required that is scrolling and finding link.

2. Small screen widths

Also when it comes to responsive, in mobile/tablet devices it may possible user might click where they didn't intend to, due to small screen widths.

"It doesn’t matter how good your website is if users can’t find their way around it."

• By jerrycao

The problem with patterns is that it’s hard to stand out when you’re doing the same thing everyone else is doing. But you don’t want to deviate too far from functionality with something as important as navigation. You need to find that sweet spot right between familiarity and creativity.

While thinking outside the box is usually a good idea, but there are some rules that you just can’t break. These are the navigation principles.

• Simple
• Clear: Alignment and Placements of Parent and Child Links
• Consistent
• Smart Reflex: Smart On-Click and On-Hover reflexes.

Your scenario:

1. Should they get Collapsed Automatically?

Yes

Explanation: Try less to confuse or making hard for users to navigate through your application. Collapsing the previous helps users to know where application needs users attention.

Showing unnecessary items could mislead or misinform them.

2. How is this scenario handled from a UX perspective?

Yes they should collapse

Explanation: Having a look from perspective of UX, again it is best practice to collapse them due to two reasons:

1. Unnecessarily possible of scroll bar to appear

It may be possible that due to allowing all parent menus to remain open, which brings in the vertical scroll-bar(According to your case). Scroll bar is not god to appear here as it's not helping user or look and feel in anyway, its just useless in here(depends case to case). Instead it makes users to do more than just what is required that is scrolling and finding link.

2. Small screen widths

Also when it comes to responsive, in mobile/tablet devices it may possible user might click where they didn't intend to, due to small screen widths.

"It doesn’t matter how good your website is if users can’t find their way around it."

• By jerrycao