Best way to create left side-bar menu with hierarchy

Any recommendations on how to best create a left side-bar menu that has hierarchy with expanding and collapsing items, and you can highlight current selection?

I’ve implemented something with the Tree add-on but it’s coming up short. I’m not able to style the currently selected/clicked item to highlight it with a different color, etc. More on this in https://vaadin.com/directory/component/tree/discussions

Attached is what I have today without the selected item highlight.

Using Vaadin 14.2.0

18279527.jpg

Have you tried the Accordion component? https://vaadin.com/components/vaadin-accordion

Alejandro Duarte:
Have you tried the Accordion component? https://vaadin.com/components/vaadin-accordion

Accordion is interesting but in the mockup I just did I found it requires some significant work in a few areas to make it work as a menu. Menu nodes that have no children when implemented in Accordion result in the expand/contract “>” and “V” being displayed. When expanding some whitespace appears below the caption of the Accordion where the panel is suppose to be.

Also I need to implement indenting to the right of each child entry.

I’m thinking Accordion might not be the best building block to work with.

Hi,

You can use a layout add-on like this: https://vaadin.com/directory/component/app-layout-add-on

but it’s maybe too much for your need.

You can also implement your own component. if you’re familiar with css/html or if you already have an example it can be done this way: https://github.com/jcgueriaud1/vaadin-bootstrap/blob/master/vaadin-bootstrap/src/main/java/org/vaadin/boostrapcss/components/BsNavBar.java
It’s an simple example with bootstrap and only one level.

Jean-Christophe Gueriaud:
Hi,

You can use a layout add-on like this: https://vaadin.com/directory/component/app-layout-add-on

but it’s maybe too much for your need.

You can also implement your own component. if you’re familiar with css/html or if you already have an example it can be done this way: https://github.com/jcgueriaud1/vaadin-bootstrap/blob/master/vaadin-bootstrap/src/main/java/org/vaadin/boostrapcss/components/BsNavBar.java
It’s an simple example with bootstrap and only one level.

The app-layout addon looks close to what I’d like. Unfortunately from the demo it looks like submenus are not indented/right-shifted which I think is very important for UX.

You can try to use a tree grid.

Sorry, forgot to add this:
https://vaadin.com/components/vaadin-tree-grid

Hi Mike

Currently the MenuBar component only allows horizontal mode. If it would work in vertical mode, it would be exactly what you are looking for.

I had already opened a github issue for it [here]
(https://github.com/vaadin/vaadin-menu-bar/issues/82), glease give it a thumbs up to raise chances of it being implemented.

However, in absence of this, both suggestions here (Accordion, TreeGrid) should work with a little setup.

Ralf N:
You can try to use a tree grid.

I’m currently using the Tree add-on which itself is based on tree grid. Tree (and thus tree grid) have some key issues which i’ve discussed here https://vaadin.com/directory/component/tree/discussions

Kaspar Scherrer:
Hi Mike

Currently the MenuBar component only allows horizontal mode. If it would work in vertical mode, it would be exactly what you are looking for.

I had already opened a github issue for it [here]
(https://github.com/vaadin/vaadin-menu-bar/issues/82), glease give it a thumbs up to raise chances of it being implemented.

However, in absence of this, both suggestions here (Accordion, TreeGrid) should work with a little setup.

Yes it would be nice if MenuBar had a vertical mode. I’ve updated your ticket with a positive comment.

Unfortunately Accordion and TreeGrid have issues as I’ve mentioned above.

I ultimately wound up implementing my own side menu using a VerticalLayout as the holder and each menu item as a HorizontalLayout composed of a Button for the expand/contract (‘>’, ‘V’) and a Button to hold the item icon and caption.

Thanks everyone for your suggestions! I definitely appreciate hearing my options before I spent time implementing my own.

mike