AppLayout with hierarchy in nav bar

How do I create a hierarchical nav bar menu in AppLayout in flow v23? Something like this:

Customers
+-- Orders
+-- Locations
Systems
+-- IP Addresses

The v23/v24 docs suggest using a horizontal approach:

Customers -> Orders Locations

But we have too many items to do that.

We also need to toggle open and toggle close each top level node.

Here’s an example where “Devices” is collapsed but has sub items and “Settings” is expanded:

Screenshot 2024-04-02 152903

Just the obvious disclaimer: Vaadin 23 is End of Free Support; so upgrading to Vaadin 24 is highly recommend. There you can use the official SideNav component.

In previous versions there was the semi official add-on which could be used GitHub - vaadin/vcf-nav - but upgrading should be higher priority.

Thanks Christian. SideNav seems to be what we need. Unfortunately we can’t upgrade to vaadin 24 yet due to all the dependency changes to spring boot, etc. Will be able to do that later this year hopefully.