Discussion about SubMenus

can any one suggest me plz - i have used Tabs for side navBar(Menus) now i want to add subMenus so how can i do it ?

There is a SidNav component you may want to have look at: Side Navigation | Components | Vaadin Docs

1 Like

yes ,but in Side navigation we don’t set icon only if we leave title empty it will took some space so used Tab for side navbar now i want to add submenus

This can be fixed with CSS for sure.

How must your menu look like?

Screenshot (3)
like this sir

Me too looking for something like this

So in fact you want to have a toolbar that opens a “Dialog” with the sublinks?

Yes ,like tooltip when I hover on menu it pop up sub menu list

Have you tried addon. It allows you to use components inside tooltip and interact with them.

Ok Sir ,Can Please Tell me how can Use That
I am using - JDK 21 ,Vaadin 24 and SpringBoot

I am New to Vaadin so Please Can u suggest ?

Screenshot from 2024-05-29 14-37-11

Hi, @gangadharhiremath20710
this will give you a direction
add your styles and themes


public class Toolbar extends MenuBar {

    public Toolbar() {

        addThemeVariants(MenuBarVariant.LUMO_TERTIARY_INLINE);

        Button contactsButton = new Button(LineAwesomeIcon.USERS_SOLID.create());
        contactsButton.addThemeVariants(ButtonVariant.LUMO_ICON);

        SubMenu sub = addItem(contactsButton).getSubMenu();
        sub.addItem(item(LineAwesomeIcon.USER.create(),"Contacts"),(clickEvent -> {
            // here is you click event
            //
        }));
        sub.addItem(item(LineAwesomeIcon.LIST_ALT.create(),"Lists"),(clickEvent -> {
            // here is you click event
            //
        }));

        sub.addItem(item(LineAwesomeIcon.BUILDING.create(),"Accounts"),(clickEvent -> {
            // here is you click event
            //
        }));

        addItem(aItem("Marketing"));
        addItem(aItem("Billing"));



    }

    private Div aItem(String text) {
        Div div = new Div(text);
        div.setWidth("80px");
        return div;
    }

    private HorizontalLayout item(SvgIcon icon,String label) {
        HorizontalLayout hl = new HorizontalLayout();
        hl.setWidth("100%");
        hl.setPadding(false);
        icon.getStyle().setMarginRight("20px");
        hl.add(icon,new Div(label));
        return hl;
    }


}

A rail navigation will be added to Vaadin+ soon. Unfortunately, there’s a few blockers in review at the moment. Once released, it should help solve your use case.

1 Like

tnx Sir,we can get it vertically Menus like side NavBar