menuFilterField

The menuFilterField component allows users to filter main menu items by their text labels using entered value.

  • XML element: menuFilterField

  • Java class: MenuFilterField

Basics

Below is an example of using the menuFilterField component in the main view:

<menuFilterField placeholder="Search..."
                 classNames="ms-s me-s"
                 menu="menu"/> (1)
<nav id="navigation"
     classNames="jmix-main-view-navigation"
     ariaLabel="msg://navigation.ariaLabel">
    <listMenu id="menu"/>
</nav>
1 The menu attribute should point to a listMenu component to be filtered.
menuFilterField
Please note that filtering of horizontalMenu is not supported.

Theme Variants

Use themeNames attribute to set a component theme.

Variant Description Supported By

align-left

Aligns the field value to the left side.

Aura, Lumo

align-center

Centers the field value.

Aura, Lumo

align-right

Aligns the field value to the right side.

Aura, Lumo

align-start

Aligns the field value to the start side, taking the current text direction into account.

Aura

align-end

Aligns the field value to the end side, taking the current text direction into account.

Aura

helper-above-field

Renders the helper text above the field, below the label.

Aura, Lumo

small

Makes the component smaller.

Aura, Lumo

Attributes

filterMode

The filterMode attribute sets the filter mode for menuFilterField. It is used to control how the filter behaves when searching for matching items. Here are the possible values for the filter case sensitivity:

  • CASE_SENSITIVE - the filter string case will not be ignored, meaning that the filter will be case-sensitive.

  • CASE_INSENSITIVE - the filter string case will be ignored, meaning that the filter will be case-insensitive.

The menu attribute should point to a listMenu component to be filtered. This attribute is required.

Handlers

To generate a handler stub in Jmix Studio, use the Handlers tab of the Jmix UI inspector panel or the Generate Handler action available in the top panel of the view class and through the CodeGenerate menu (Alt+Insert / Cmd+N).