listMenu

listMenu displays a vertical menu with collapsible submenus.

XML Element

listMenu

Java Class

JmixListMenu

Overview

List menu

Basics

listMenu, together with drawerToggle and drawerLayout, is used in the MainView.

listMenu allows you to customize the main view, manage menu items, and apply custom styles.

It can also be used on any view as any other visual component.

To add the component on a view, place it in the view descriptor:

<listMenu id="listMenu"/>

You can also create and add the component to a view in a Java controller:

@ViewComponent
private VerticalLayout navigation;
@Autowired
private UiComponents uiComponents;
@Autowired
private ApplicationContext applicationContext;

@Subscribe
public void onInit(final InitEvent event) {
    JmixListMenu listMenu = uiComponents.create(JmixListMenu.class);

    MenuConfigListMenuItemProvider itemProvider =
            applicationContext.getBean(MenuConfigListMenuItemProvider.class);
    listMenu.setMenuItemProvider(itemProvider);
    navigation.add(listMenu);

    itemProvider.load();
}

Menu Configuration

The loadMenuConfig attribute controls whether the listMenu component loads its structure from the MenuConfig class. By default, this attribute is set to true, which means listMenu will load its menu items from the menu.xml file.

You can also create menu items programmatically using the JmixListMenu instance, for example:

@Route("")
@ViewController("MainView")
@ViewDescriptor("main-view.xml")
public class MainView extends StandardMainView {

    @ViewComponent
    private JmixListMenu menu;

    @Subscribe
    public void onInit(final InitEvent event) {
        ListMenu.MenuBarItem rootItem = new ListMenu.MenuBarItem("help")
                .withTitle("Help")
                .withPrefixComponent(VaadinIcon.QUESTION.create()); (1)
        ListMenu.MenuItem subItemNews = new ListMenu.MenuItem("news")
                .withTitle("News")
                .withClickHandler(  (2)
                        item -> {
                            notifications.create("News menu item clicked")
                                    .show();
                        }
                );
        rootItem.addChildItem(subItemNews);
        ListMenu.MenuSeparatorItem sep =
                new ListMenu.MenuSeparatorItem("separator"); (3)
        rootItem.addChildItem(sep);
        ListMenu.MenuItem subItemBlog = new ListMenu.MenuItem("blog")
                .withTitle("Blog");
        rootItem.addChildItem(subItemBlog);
        menu.addMenuItem(rootItem);
    }
}
1 Create a new menu item with an icon.
2 Create a new menu item with the clickHandler consumer.
3 Create a new separator item.

Badges for Menu Item

You can find an example of setting menu item badges in the UI Events section.

Theme Variants

Use the themeNames attribute to apply one or more theme variants.

Variant Description Supported By

toggle-reverse

Moves the expand and collapse toggle to the end of the parent menu item.

Aura, Lumo

Attributes

The following attributes are specific to listMenu:

Name Description Default

loadMenuConfig

The loadMenuConfig attribute is used to control the loading of menu structure from Menu Configuration. The default value is true, which means that the listMenu component loads its menu structure from MenuConfig by default. If you want to use a different item provider, you should set the loadMenuConfig attribute to false first.

true

The following shared attributes are supported by listMenu:

id - alignSelf - classNames - colspan - css - height - maxHeight - maxWidth - minHeight - minWidth - themeNames - visible - width

Handlers

The following shared handlers are supported by listMenu:

AttachEvent - DetachEvent