AppLayout with hierarchy in nav bar

Flow
1

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

2

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.

3

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.

4

Hi !! I am searching for the same Navigation in Vaadin24.
I use SideNav and created my hierarchical menu with SideNav.

How can i add this toggle-button. And how can i collapse the Menu when it´s expanded. I didn´t find a solution to implement that.

Does anyone have an example for this ??

5

The SideNav component automatically adds toggle buttons if you configure it with a hierarchy. See Side Navigation | Components | Vaadin Docs for an example. You can control whether sections are expanded by default by setting the expanded property (item.setExpaned(true) from Java).

1 Like
6

Thank you for the fast answer. Works now fine for me !!

7

As far as my test application goes, the default behaviour of the SideNavItems seems to be to expand the parent item if it’s the view you have currently navigated into. Usually this isn’t really an issue, but I have just been engaged in a discussion where a user wanted to prevent this, so I thought it prudent to point it out.

8

Yes, i see this, but it´s no problem for my Application.

9

I have one further question with SideNav:

Here you see a SideNavItem when it is selected:

image001

In which class can i change the blue background, when “Import” is selected ??

10

According to the styling docs, it looks like you want vaadin-side-nav-item[current].

11

I tried all CSS Selectors from here Styling | Side Navigation | Components | Vaadin Docs (includes the one you mentioned) but no one worked for that problem.

12

You need to combine both the current item and the content:

vaadin-side-nav-item[current]::part(content) {
  background-color: green;
}
13

That works for me !! Thx for the help