vaadin: why it is not recommended to use menu / menubar for navigation?

Viewed 113

On Vaadin documentation page of Menubar, on Best practice section it's written:

Menu Bar should not be used for navigation. Use tabs to switch between content, or anchor elements for regular navigation.

Why? It could be useful to have a multilevel component that can be used for navigation between views too.

Thanks for the help.

1 Answers

Mainly because of semantics and accessibility. The Menu Bar component is not implemented to make it appear as a navigation element for assistive technologies like screen readers.

I’m not sure how it behaves if you wrap it inside a Nav/<nav> component/element, and use Anchor/<a> components/elements inside it. I also don’t know how screen reader users expect to navigate hierarchical navigation menus, when the HTML structure is not a standard nested <ul>.

That said, accessibility is not black and white. So I encourage you to test with your real users, see if they can use your application effectively if you implement the navigation using Menu Bar. That’s all that matters, unless you also need to comply with certain accessibility standards (see the Vaadin webinar about those).

Finally:

It could be useful to have a multilevel component that can be used for navigation between views too.

Yes, that would be very useful in many/most applications. It’s on the radar, but it hasn’t been prioritized yet. Hopefully that’ll become an official component in the future.

Related