ListMenu — Smart UI JavaScript API

ListMenu — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>ListMenu - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-list-menu id="demo-listmenu"></smart-list-menu>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.listmenu.js';

    const el = document.getElementById('demo-listmenu');
    if (el) {

      el.dataSource = [
        { label: 'Products', items: [{ label: 'Grid' }, { label: 'Scheduler' }] },
        { label: 'Support', items: [{ label: 'Documentation' }, { label: 'Forum' }] }
      ];

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: ListMenu   Framework: JavaScript   Selector: smart-list-menu

API counts: 34 properties, 9 methods, 6 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: addItem(), back(), changePage(), checkItem(), getItem(), maximize()

Common events: expand, itemCheckChange, itemClick, scrollBottomReached, swipeleft, swiperight

Module hint: smart-webcomponents/source/modules/smart.listmenu.js

ListMenu allows you to present users a listing of options and sub options.

Class

ListMenu
ListItem
ListItemsGroup

ListMenu

ListMenu allows you to present users a listing of options and sub options.

Selector

smart-list-menu

Quick picks

dataSourcedisabled

Properties

AanimationSpecifies or retrieves the current animation mode. When set to 'none', all animations are completely disabled; otherwise, the selected animation mode is enabled. Use this property to control whether animations play or are suppressed within the component.
AautoFocusOnMouseenterControls whether the element automatically receives keyboard focus when a user hovers the mouse pointer over it. If enabled, the element will become the active focus target on hover, allowing for keyboard interactions without requiring a click. If disabled, hovering does not change the focus state.
CcheckableEnables top-level items within the ListMenu to support checkable states, allowing users to select or deselect these menu items with a checkbox or similar indicator. This feature provides enhanced interactivity by letting users clearly mark individual ListMenu options as checked or unchecked.
CcheckboxesControls whether checkboxes and radio buttons can appear in the top-level groups of the ListMenu. This property applies exclusively to the ListMenu component itself, and does not affect subitems within smart-menu-item or smart-menu-items-group elements. For related functionality, refer to the checkable property.
CcheckModeConfigures the selection behavior (check mode) for top-level ListMenu items (groups). This determines whether menu items can be selected individually, allow multiple selections, or behave like radio buttons, affecting how users interact with the menu.
DdataSourceSpecifies the data source to be displayed in the ListMenu component. The data source must be an array of objects, where each object represents a menu item with the following properties: label: string – The text displayed for the menu item. value: any – The unique value or identifier associated with the menu item. shortcut: string (optional) – A keyboard shortcut or hint displayed alongside the menu item. items: array (optional) – An array of submenu item objects, each following the same structure, allowing for the creation of nested or hierarchical menus. This structure enables the ListMenu to render both simple and multi-level menus, providing flexibility in how menu options and their shortcuts are presented to users.
DdisabledDetermines whether the element is interactive or not. When enabled, users can interact with the element. When disabled, the element becomes non-interactive and typically appears visually distinct (e.g., grayed out) to indicate its inactive state.
DdisplayLoadingIndicatorControls the visibility of the loading indicator. By default, the loading indicator is hidden; setting this option to true will display the indicator, while setting it to false will hide it.
DdisplayMemberSpecifies which field in the data source should be used as the label for each item. This determines the text that will be displayed to represent the item in the user interface.
DdropDownAppendToSpecifies a custom outer container to which the minimized dropdown will be appended. By default, the dropdown is appended to the ListMenu container. You can set this property to either an HTML element or a string representing the ID of an HTML element.
DdropDownOverlayIf this property is enabled, opening the element's minimized dropdown will display a transparent overlay that covers the area between the dropdown and the rest of the page content. This overlay visually separates the dropdown from other elements on the page and can also intercept clicks to prevent interactions with content outside the dropdown until it is closed.
DdropDownPositionSpecifies or retrieves the direction in which the ListMenu's minimized dropdown expands when opened, such as upward or downward. This property determines the alignment and positioning of the dropdown relative to the ListMenu component.
EenableMouseWheelActionControls whether users can scroll through menu items that overflow the visible area by using the mouse wheel. When enabled, using the mouse wheel will navigate vertically through menu items not currently visible within the menu’s viewport. When disabled, mouse wheel scrolling will have no effect on overflowing menu content.
FfilterableControls the activation of menu item filtering functionality. When enabled, a filter input field appears at the top of the menu component, allowing users to search and display only the menu items that match the entered query. Note that filtering is limited to items currently rendered or visible in the menu's current view; items not present in the view will not be affected by the filter.
FfilterInputPlaceholderSpecifies the placeholder text displayed inside the filter input field, guiding users on the expected input or action.
FfilterMemberSpecifies which property of the MenuItem will be used as the filtering criterion. By default, the filtering is performed using the label property of each MenuItem. You can change this setting to use other properties instead, such as value if you want to filter based on the MenuItem's value property, or textContent if you prefer to filter using the text content within the MenuItem. Additionally, you may specify any other property name to customize the filtering behavior according to your application's requirements.
FfilterModeSpecifies the method used to filter or process data, such as selecting items based on certain criteria, applying search terms, or excluding specific values. This setting controls how data is displayed or retrieved according to the selected filtering mode.
GgroupedIf enabled, the items will be organized into groups based on the first letter of each item's name. Within each group, the items will be sorted alphabetically.
IitemsMemberSpecifies the name of the field within the data source that contains the collection of subitems associated with each item group. This field is used to retrieve and bind the subitems for display or processing within the application.
LloadingIndicatorPlaceholderSpecifies the text to display alongside the loading indicator when the loader is visible and positioned at the top or bottom of the container. This text provides context or feedback to users during loading operations.
LloadingIndicatorPositionSpecifies the exact location where the loading indicator will appear within the parent element. This controls whether the loading indicator is displayed at the top, center, bottom, or another defined position inside the element’s boundaries.
LlocaleSpecifies or retrieves the current language code (such as "en", "fr", or "es"), which determines the set of localized messages to use from the messages property. This property ensures that the appropriate language-specific messages are displayed to users based on their language selection or system settings.
LlocalizeFormatFunctionA callback function that allows you to define custom formatting for messages returned by the Localization Module. Use this to modify how localized strings are generated and displayed, such as altering text templates, injecting dynamic values, or adjusting message structure before they are delivered to your application.
MmessagesDefines or retrieves an object containing localized strings used throughout the widget’s interface. This property is intended to facilitate internationalization by allowing you to provide translations for various UI text elements. It is typically used in combination with the locale property, which determines the currently active language or regional format.
MminimizeIconTemplateEnables the use of a custom minimize icon by specifying an HTMLTemplateElement. This property accepts either the ID of an HTMLTemplateElement (as a string) or a direct reference to the HTMLTemplateElement instance. The content of the provided template will be rendered in place of the default minimize icon.
MminimizeWidthSpecifies the minimum width, in pixels, that the ListMenu must reach before automatically switching from its normal (expanded) mode to minimized mode. If this value is set to null, the ListMenu will remain in its normal mode regardless of its width and will not minimize automatically.
OoverflowDefines or retrieves the behavior of the ListMenu's scroll buttons, specifying how they appear and function when the menu content exceeds the visible area. This property controls whether scroll buttons are shown, when they become visible, and how users can interact with them to navigate through the list.
RreadonlyIf the element has the "readonly" attribute, users can view its content but cannot modify or edit it. While the element remains focusable and its text can be selected or copied, any user attempts to change its value will be blocked, ensuring the data remains unchanged.
RrightToLeftSpecifies or retrieves a value that determines whether the element's text and layout direction are set to support right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element and its contents will display text and align elements according to RTL conventions.
SscrollModeSpecifies whether to display a traditional scrollbar or custom scroll buttons when the content exceeds the boundaries of an element’s container. This setting controls the method users can use to navigate overflow content within the element.
TthemeSpecifies the visual theme to apply to the element. The selected theme controls the element’s overall appearance, including colors, fonts, and styling, ensuring a consistent look and feel throughout the user interface.
UunfocusableWhen set to true, the element becomes unfocusable, meaning it cannot receive input focus via keyboard navigation (such as the Tab key), mouse clicks, or scripting methods.
UunlockKeyDefines or retrieves the unlockKey property, a unique identifier or code required to unlock and grant access to the product’s features or content.
VvalueMemberSpecifies the name of the field in the data source whose value will be assigned as the item's value property. This field is used to uniquely identify each item within the data collection.

Events

EexpandThis event is triggered whenever a smart-menu-items-group component is expanded by the user, indicating that the associated menu group has been opened to reveal its child menu items. Developers can use this event to perform actions such as loading dynamic content, updating UI states, or triggering additional functionality when a menu group becomes visible.
IitemCheckChangeThis event is triggered whenever the checked or unchecked state of a menu item is modified—such as when a user selects or deselects a checkbox or toggle option within a menu. It allows you to respond to changes in the check state of menu items, enabling dynamic UI updates or additional actions based on the user's selection.
IitemClickThis event is triggered whenever a user interacts with the menu by clicking on one of its list items. The event provides details about the specific item selected, allowing you to execute custom logic in response to the user's selection.
SscrollBottomReachedThis event is triggered when the user reaches the bottom of the ListMenu by scrolling. It can be used to detect when additional actions are needed, such as loading more items or displaying a message, once the user has viewed all currently visible content in the ListMenu.
SswipeleftThis event is triggered when the user performs a leftward swipe gesture within the ListMenu component, typically indicating an intent to reveal additional options, delete an item, or navigate to a different view. It is designed to respond exclusively to horizontal swipes that start inside the ListMenu area.
SswiperightThis event is triggered when the user performs a rightward swipe gesture within the ListMenu component. It can be used to detect and handle user interactions such as revealing additional options, navigating to a new view, or initiating specific actions in response to the right swipe inside the ListMenu area.

Methods

AaddItemAppends a new item to the end of the existing list, expanding the list by one element.
BbackNavigates to the previous page within the group of menu items (`smart-menu-items-group`). This function moves the user’s focus or view to the preceding set of menu options, enabling seamless backward navigation in multi-page or scrollable menu interfaces.
CchangePageNavigates the user to a specific page or section within the application identified as "smart-menu-items-group." This action typically triggers a transition or redirect, bringing the "smart-menu-items-group" content into view for the user. Suitable for menu navigation or directing users to targeted groups within a menu structure.
CcheckItemMarks an item as checked, indicating that it has been selected or completed. This action typically updates the item's status property (e.g., `checked: true`) within the JSON data.
GgetItemRetrieves a specific item using either its unique identifier (ID) or a numeric path that locates the item within a hierarchical structure.
MmaximizeExpands the List Menu to its maximum available size, displaying all menu items for full visibility and easier selection.
MminimizeCollapses the List Menu to save screen space. When minimized, the full menu is hidden and replaced with a single icon, allowing users to expand the menu again if needed. This improves the user interface by providing a cleaner, less cluttered appearance while maintaining quick access to menu options.
RremoveItemRemoves a specified item from the collection or list. If the item exists, it is deleted; otherwise, no changes are made. This operation typically identifies the item by its unique key, index, or value.
UuncheckItemRemoves the checkmark from a selected item, resetting its state to unchecked or unselected. This action is typically used to indicate that the item is not active, chosen, or included in a selection.

Properties

animationSpecifies or retrieves the current animation mode. When set to 'none', all animations are completely disabled; otherwise, the selected animation mode is enabled. Use this property to control whether animations play or are suppressed within the component."none" | "simple" | "advanced"

Specifies or retrieves the current animation mode. When set to 'none', all animations are completely disabled; otherwise, the selected animation mode is enabled. Use this property to control whether animations play or are suppressed within the component.

Allowed Values

  • "none" - animation is disabled
  • "simple" - ripple animation is disabled
  • "advanced" - all animations are enabled

Default value

"advanced"

Examples

Markup and runtime examples for animation:

HTML:

<smart-list-menu animation="none"></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.animation = "simple";

Read the current value:

const el = document.querySelector('smart-list-menu');
const animation = el.animation;

autoFocusOnMouseenterControls whether the element automatically receives keyboard focus when a user hovers the mouse pointer over it. If enabled, the element will become the active focus target on hover, allowing for keyboard interactions without requiring a click. If disabled, hovering does not change the focus state.boolean

Controls whether the element automatically receives keyboard focus when a user hovers the mouse pointer over it. If enabled, the element will become the active focus target on hover, allowing for keyboard interactions without requiring a click. If disabled, hovering does not change the focus state.

Default value

false

Examples

Markup and runtime examples for autoFocusOnMouseenter:

HTML attribute:

<smart-list-menu auto-focus-on-mouseenter></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.autoFocusOnMouseenter = false;

Read the current value:

const el = document.querySelector('smart-list-menu');
const autoFocusOnMouseenter = el.autoFocusOnMouseenter;

checkableEnables top-level items within the ListMenu to support checkable states, allowing users to select or deselect these menu items with a checkbox or similar indicator. This feature provides enhanced interactivity by letting users clearly mark individual ListMenu options as checked or unchecked.boolean

Enables top-level items within the ListMenu to support checkable states, allowing users to select or deselect these menu items with a checkbox or similar indicator. This feature provides enhanced interactivity by letting users clearly mark individual ListMenu options as checked or unchecked.

Default value

false

Examples

Markup and runtime examples for checkable:

HTML attribute:

<smart-list-menu checkable></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.checkable = false;

Read the current value:

const el = document.querySelector('smart-list-menu');
const checkable = el.checkable;

checkboxesControls whether checkboxes and radio buttons can appear in the top-level groups of the ListMenu. This property applies exclusively to the ListMenu component itself, and does not affect subitems within smart-menu-item or smart-menu-items-group elements. For related functionality, refer to the checkable property.boolean

Controls whether checkboxes and radio buttons can appear in the top-level groups of the ListMenu. This property applies exclusively to the ListMenu component itself, and does not affect subitems within smart-menu-item or smart-menu-items-group elements. For related functionality, refer to the checkable property.

Default value

false
Try a demo showcasing the checkboxes property.

Examples

Markup and runtime examples for checkboxes:

HTML attribute:

<smart-list-menu checkboxes></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.checkboxes = false;

Read the current value:

const el = document.querySelector('smart-list-menu');
const checkboxes = el.checkboxes;

checkModeConfigures the selection behavior (check mode) for top-level ListMenu items (groups). This determines whether menu items can be selected individually, allow multiple selections, or behave like radio buttons, affecting how users interact with the menu."checkbox" | "radioButton"

Configures the selection behavior (check mode) for top-level ListMenu items (groups). This determines whether menu items can be selected individually, allow multiple selections, or behave like radio buttons, affecting how users interact with the menu.

Allowed Values

  • "checkbox" - A check box is shown inside a menu group that is selected.
  • "radioButton" - A radio dot is shown inside a menu group that is selected.

Default value

"checkbox"
Try a demo showcasing the checkMode property.

Examples

Markup and runtime examples for checkMode:

HTML:

<smart-list-menu check-mode="radioButton"></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.checkMode = "checkbox";

Read the current value:

const el = document.querySelector('smart-list-menu');
const checkMode = el.checkMode;

dataSourceSpecifies the data source to be displayed in the ListMenu component. The data source must be an array of objects, where each object represents a menu item with the following properties: label: string – The text displayed for the menu item. value: any – The unique value or identifier associated with the menu item. shortcut: string (optional) – A keyboard shortcut or hint displayed alongside the menu item. items: array (optional) – An array of submenu item objects, each following the same structure, allowing for the creation of nested or hierarchical menus. This structure enables the ListMenu to render both simple and multi-level menus, providing flexibility in how menu options and their shortcuts are presented to users.{label: string, shortcut: string, value: any, items: []}[]

Specifies the data source to be displayed in the ListMenu component. The data source must be an array of objects, where each object represents a menu item with the following properties:




label: string – The text displayed for the menu item.




value: any – The unique value or identifier associated with the menu item.




shortcut: string (optional) – A keyboard shortcut or hint displayed alongside the menu item.




items: array (optional) – An array of submenu item objects, each following the same structure, allowing for the creation of nested or hierarchical menus.




This structure enables the ListMenu to render both simple and multi-level menus, providing flexibility in how menu options and their shortcuts are presented to users.

Try a demo showcasing the dataSource property.

Examples

Markup and runtime examples for dataSource:

HTML:

<smart-list-menu data-source="[{ label: "File" }, { label: "Help" }]"></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.dataSource = [{ label: 'File', items: [{ label: 'New', shortcut: 'Ctrl+N' }] }];

Read the current value:

const el = document.querySelector('smart-list-menu');
const dataSource = el.dataSource;

disabledDetermines whether the element is interactive or not. When enabled, users can interact with the element. When disabled, the element becomes non-interactive and typically appears visually distinct (e.g., grayed out) to indicate its inactive state.boolean

Determines whether the element is interactive or not. When enabled, users can interact with the element. When disabled, the element becomes non-interactive and typically appears visually distinct (e.g., grayed out) to indicate its inactive state.

Default value

false

Examples

Markup and runtime examples for disabled:

HTML attribute:

<smart-list-menu disabled></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.disabled = false;

Read the current value:

const el = document.querySelector('smart-list-menu');
const disabled = el.disabled;

displayLoadingIndicatorControls the visibility of the loading indicator. By default, the loading indicator is hidden; setting this option to true will display the indicator, while setting it to false will hide it.boolean

Controls the visibility of the loading indicator. By default, the loading indicator is hidden; setting this option to true will display the indicator, while setting it to false will hide it.

Default value

false
Try a demo showcasing the displayLoadingIndicator property.

Examples

Markup and runtime examples for displayLoadingIndicator:

HTML attribute:

<smart-list-menu display-loading-indicator></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.displayLoadingIndicator = false;

Read the current value:

const el = document.querySelector('smart-list-menu');
const displayLoadingIndicator = el.displayLoadingIndicator;

displayMemberSpecifies which field in the data source should be used as the label for each item. This determines the text that will be displayed to represent the item in the user interface.string

Specifies which field in the data source should be used as the label for each item. This determines the text that will be displayed to represent the item in the user interface.

Default value

"label"

Examples

Markup and runtime examples for displayMember:

HTML:

<smart-list-menu display-member="title"></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.displayMember = "caption";

Read the current value:

const el = document.querySelector('smart-list-menu');
const displayMember = el.displayMember;

dropDownAppendToSpecifies a custom outer container to which the minimized dropdown will be appended. By default, the dropdown is appended to the ListMenu container. You can set this property to either an HTML element or a string representing the ID of an HTML element.string | HTMLElement

Specifies a custom outer container to which the minimized dropdown will be appended. By default, the dropdown is appended to the ListMenu container. You can set this property to either an HTML element or a string representing the ID of an HTML element.

Examples

Markup and runtime examples for dropDownAppendTo:

HTML:

<smart-list-menu drop-down-append-to="body"></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.dropDownAppendTo = "'customContainer'";

Read the current value:

const el = document.querySelector('smart-list-menu');
const dropDownAppendTo = el.dropDownAppendTo;

dropDownOverlayIf this property is enabled, opening the element's minimized dropdown will display a transparent overlay that covers the area between the dropdown and the rest of the page content. This overlay visually separates the dropdown from other elements on the page and can also intercept clicks to prevent interactions with content outside the dropdown until it is closed.boolean

If this property is enabled, opening the element's minimized dropdown will display a transparent overlay that covers the area between the dropdown and the rest of the page content. This overlay visually separates the dropdown from other elements on the page and can also intercept clicks to prevent interactions with content outside the dropdown until it is closed.

Default value

false

Examples

Markup and runtime examples for dropDownOverlay:

HTML attribute:

<smart-list-menu drop-down-overlay></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.dropDownOverlay = false;

Read the current value:

const el = document.querySelector('smart-list-menu');
const dropDownOverlay = el.dropDownOverlay;

dropDownPositionSpecifies or retrieves the direction in which the ListMenu's minimized dropdown expands when opened, such as upward or downward. This property determines the alignment and positioning of the dropdown relative to the ListMenu component."auto" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "overlay-left" | "overlay-right"

Specifies or retrieves the direction in which the ListMenu's minimized dropdown expands when opened, such as upward or downward. This property determines the alignment and positioning of the dropdown relative to the ListMenu component.

Allowed Values

  • "auto" - The position is automatically determined by measuring the available distance around the element for the drop down to open freely without being clipped by the edges of the browser. By default the drop down will try to open below the element. If the available space is not enough for the popup to appear it will open in one of the following directions, if possible: top, over.
  • "top-left" - The drop down opens above and to the left of the seleted Item Group.
  • "top-right" - The drop down opens above and to the right of the seleted Item Group.
  • "bottom-left" - The drop down opens below and to the left of the seleted Item Group.
  • "bottom-right" - The drop down opens below and to the right of the seleted Item Group.
  • "overlay-left" - The drop down opens over the seleted Item Group by aligning to the left.
  • "overlay-right" - The drop down opens over and to the left of the seleted Item Group by aligning to the right.

Default value

"auto"

Examples

Markup and runtime examples for dropDownPosition:

HTML:

<smart-list-menu drop-down-position="top-left"></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.dropDownPosition = "top-right";

Read the current value:

const el = document.querySelector('smart-list-menu');
const dropDownPosition = el.dropDownPosition;

enableMouseWheelActionControls whether users can scroll through menu items that overflow the visible area by using the mouse wheel. When enabled, using the mouse wheel will navigate vertically through menu items not currently visible within the menu’s viewport. When disabled, mouse wheel scrolling will have no effect on overflowing menu content.boolean

Controls whether users can scroll through menu items that overflow the visible area by using the mouse wheel. When enabled, using the mouse wheel will navigate vertically through menu items not currently visible within the menu’s viewport. When disabled, mouse wheel scrolling will have no effect on overflowing menu content.

Default value

false
Try a demo showcasing the enableMouseWheelAction property.

Examples

Markup and runtime examples for enableMouseWheelAction:

HTML attribute:

<smart-list-menu enable-mouse-wheel-action></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.enableMouseWheelAction = true;

Read the current value:

const el = document.querySelector('smart-list-menu');
const enableMouseWheelAction = el.enableMouseWheelAction;

filterableControls the activation of menu item filtering functionality. When enabled, a filter input field appears at the top of the menu component, allowing users to search and display only the menu items that match the entered query. Note that filtering is limited to items currently rendered or visible in the menu's current view; items not present in the view will not be affected by the filter.boolean

Controls the activation of menu item filtering functionality. When enabled, a filter input field appears at the top of the menu component, allowing users to search and display only the menu items that match the entered query. Note that filtering is limited to items currently rendered or visible in the menu's current view; items not present in the view will not be affected by the filter.

Default value

false
Try a demo showcasing the filterable property.

Examples

Markup and runtime examples for filterable:

HTML attribute:

<smart-list-menu filterable></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.filterable = false;

Read the current value:

const el = document.querySelector('smart-list-menu');
const filterable = el.filterable;

filterInputPlaceholderSpecifies the placeholder text displayed inside the filter input field, guiding users on the expected input or action.string

Specifies the placeholder text displayed inside the filter input field, guiding users on the expected input or action.

Default value

""
Try a demo showcasing the filterInputPlaceholder property.

Examples

Markup and runtime examples for filterInputPlaceholder:

HTML:

<smart-list-menu filter-input-placeholder="Enter a value:"></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.filterInputPlaceholder = "Awaiting entry:";

Read the current value:

const el = document.querySelector('smart-list-menu');
const filterInputPlaceholder = el.filterInputPlaceholder;

filterMemberSpecifies which property of the MenuItem will be used as the filtering criterion. By default, the filtering is performed using the label property of each MenuItem. You can change this setting to use other properties instead, such as value if you want to filter based on the MenuItem's value property, or textContent if you prefer to filter using the text content within the MenuItem. Additionally, you may specify any other property name to customize the filtering behavior according to your application's requirements.string

Specifies which property of the MenuItem will be used as the filtering criterion. By default, the filtering is performed using the label property of each MenuItem. You can change this setting to use other properties instead, such as value if you want to filter based on the MenuItem's value property, or textContent if you prefer to filter using the text content within the MenuItem. Additionally, you may specify any other property name to customize the filtering behavior according to your application's requirements.

Default value

"label"
Try a demo showcasing the filterMember property.

Examples

Markup and runtime examples for filterMember:

HTML:

<smart-list-menu filter-member="value"></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.filterMember = "textContent";

Read the current value:

const el = document.querySelector('smart-list-menu');
const filterMember = el.filterMember;

filterModeSpecifies the method used to filter or process data, such as selecting items based on certain criteria, applying search terms, or excluding specific values. This setting controls how data is displayed or retrieved according to the selected filtering mode."contains" | "containsIgnoreCase" | "doesNotContain" | "doesNotContainIgnoreCase" | "equals" | "equalsIgnoreCase" | "startsWith" | "startsWithIgnoreCase" | "endsWith" | "endsWithIgnoreCase"

Specifies the method used to filter or process data, such as selecting items based on certain criteria, applying search terms, or excluding specific values. This setting controls how data is displayed or retrieved according to the selected filtering mode.

Allowed Values

  • "contains" - displays only items with labels that contain the filter string (case sensitive)
  • "containsIgnoreCase" - displays only items with labels that contain the filter string (case insensitive)
  • "doesNotContain" - displays only items with labels that do not contain the filter string (case sensitive)
  • "doesNotContainIgnoreCase" - displays only items with labels that do not contain the filter string (case insensitive)
  • "equals" - displays only items with labels that equal the filter string (case sensitive)
  • "equalsIgnoreCase" - displays only items with labels that equal the filter string (case insensitive)
  • "startsWith" - displays only items with labels that start with the filter string (case sensitive)
  • "startsWithIgnoreCase" - displays only items with labels that start with the filter string (case insensitive)
  • "endsWith" - displays only items with labels that end with the filter string (case sensitive)
  • "endsWithIgnoreCase" - displays only items with labels that end with the filter string (case insensitive)

Default value

"containsIgnoreCase"
Try a demo showcasing the filterMode property.

Examples

Markup and runtime examples for filterMode:

HTML:

<smart-list-menu filter-mode="contains"></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.filterMode = "equals";

Read the current value:

const el = document.querySelector('smart-list-menu');
const filterMode = el.filterMode;

groupedIf enabled, the items will be organized into groups based on the first letter of each item's name. Within each group, the items will be sorted alphabetically.boolean

If enabled, the items will be organized into groups based on the first letter of each item's name. Within each group, the items will be sorted alphabetically.

Default value

false
Try a demo showcasing the grouped property.

Examples

Markup and runtime examples for grouped:

HTML attribute:

<smart-list-menu grouped></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.grouped = false;

Read the current value:

const el = document.querySelector('smart-list-menu');
const grouped = el.grouped;

itemsMemberSpecifies the name of the field within the data source that contains the collection of subitems associated with each item group. This field is used to retrieve and bind the subitems for display or processing within the application.string

Specifies the name of the field within the data source that contains the collection of subitems associated with each item group. This field is used to retrieve and bind the subitems for display or processing within the application.

Default value

"items"
Try a demo showcasing the itemsMember property.

Examples

Markup and runtime examples for itemsMember:

HTML:

<smart-list-menu items-member="children"></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.itemsMember = "subitems";

Read the current value:

const el = document.querySelector('smart-list-menu');
const itemsMember = el.itemsMember;

loadingIndicatorPlaceholderSpecifies the text to display alongside the loading indicator when the loader is visible and positioned at the top or bottom of the container. This text provides context or feedback to users during loading operations.string

Specifies the text to display alongside the loading indicator when the loader is visible and positioned at the top or bottom of the container. This text provides context or feedback to users during loading operations.

Default value

"Loading..."

Examples

Markup and runtime examples for loadingIndicatorPlaceholder:

HTML:

<smart-list-menu loading-indicator-placeholder="Incoming data"></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.loadingIndicatorPlaceholder = "LOADING...";

Read the current value:

const el = document.querySelector('smart-list-menu');
const loadingIndicatorPlaceholder = el.loadingIndicatorPlaceholder;

loadingIndicatorPositionSpecifies the exact location where the loading indicator will appear within the parent element. This controls whether the loading indicator is displayed at the top, center, bottom, or another defined position inside the element’s boundaries."bottom" | "center" | "top"

Specifies the exact location where the loading indicator will appear within the parent element. This controls whether the loading indicator is displayed at the top, center, bottom, or another defined position inside the element’s boundaries.

Allowed Values

  • "bottom" - Positions the loading indicator at the bottom of the list menu.
  • "center" - Positions the loading indicator at the center of the list menu.
  • "top" - Positions the loading indicator at the bottom of the list menu.

Default value

"center"

Examples

Markup and runtime examples for loadingIndicatorPosition:

HTML:

<smart-list-menu loading-indicator-position="bottom"></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.loadingIndicatorPosition = "top";

Read the current value:

const el = document.querySelector('smart-list-menu');
const loadingIndicatorPosition = el.loadingIndicatorPosition;

localeSpecifies or retrieves the current language code (such as "en", "fr", or "es"), which determines the set of localized messages to use from the messages property. This property ensures that the appropriate language-specific messages are displayed to users based on their language selection or system settings.string

Specifies or retrieves the current language code (such as "en", "fr", or "es"), which determines the set of localized messages to use from the messages property. This property ensures that the appropriate language-specific messages are displayed to users based on their language selection or system settings.

Default value

"en"

Examples

Markup and runtime examples for locale:

HTML:

<smart-list-menu locale="de"></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.locale = "fr";

Read the current value:

const el = document.querySelector('smart-list-menu');
const locale = el.locale;

localizeFormatFunctionA callback function that allows you to define custom formatting for messages returned by the Localization Module. Use this to modify how localized strings are generated and displayed, such as altering text templates, injecting dynamic values, or adjusting message structure before they are delivered to your application.function | null

A callback function that allows you to define custom formatting for messages returned by the Localization Module. Use this to modify how localized strings are generated and displayed, such as altering text templates, injecting dynamic values, or adjusting message structure before they are delivered to your application.

Examples

Markup and runtime examples for localizeFormatFunction:

HTML:

<smart-list-menu localize-format-function="function(defaultMessage, message, messageArguments){return '...'}"></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.localizeFormatFunction = "function(defaultMessage, message, messageArguments){return '...'}";

Read the current value:

const el = document.querySelector('smart-list-menu');
const localizeFormatFunction = el.localizeFormatFunction;

messagesDefines or retrieves an object containing localized strings used throughout the widget’s interface. This property is intended to facilitate internationalization by allowing you to provide translations for various UI text elements. It is typically used in combination with the locale property, which determines the currently active language or regional format.object

Defines or retrieves an object containing localized strings used throughout the widget’s interface. This property is intended to facilitate internationalization by allowing you to provide translations for various UI text elements. It is typically used in combination with the locale property, which determines the currently active language or regional format.

Default value




"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."

}

Examples

Markup and runtime examples for messages:

HTML:

<smart-list-menu messages="{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss."}}"></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."}};

Read the current value:

const el = document.querySelector('smart-list-menu');
const messages = el.messages;

minimizeIconTemplateEnables the use of a custom minimize icon by specifying an HTMLTemplateElement. This property accepts either the ID of an HTMLTemplateElement (as a string) or a direct reference to the HTMLTemplateElement instance. The content of the provided template will be rendered in place of the default minimize icon.string



Enables the use of a custom minimize icon by specifying an HTMLTemplateElement. This property accepts either the ID of an HTMLTemplateElement (as a string) or a direct reference to the HTMLTemplateElement instance. The content of the provided template will be rendered in place of the default minimize icon.

Default value

"null"

Examples

Markup and runtime examples for minimizeIconTemplate:

HTML:

<smart-list-menu minimize-icon-template="template1"></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.minimizeIconTemplate = "template2";

Read the current value:

const el = document.querySelector('smart-list-menu');
const minimizeIconTemplate = el.minimizeIconTemplate;

minimizeWidthSpecifies the minimum width, in pixels, that the ListMenu must reach before automatically switching from its normal (expanded) mode to minimized mode. If this value is set to null, the ListMenu will remain in its normal mode regardless of its width and will not minimize automatically.number | null

Specifies the minimum width, in pixels, that the ListMenu must reach before automatically switching from its normal (expanded) mode to minimized mode. If this value is set to null, the ListMenu will remain in its normal mode regardless of its width and will not minimize automatically.

Examples

Markup and runtime examples for minimizeWidth:

HTML:

<smart-list-menu minimize-width="100"></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.minimizeWidth = 200;

Read the current value:

const el = document.querySelector('smart-list-menu');
const minimizeWidth = el.minimizeWidth;

overflowDefines or retrieves the behavior of the ListMenu's scroll buttons, specifying how they appear and function when the menu content exceeds the visible area. This property controls whether scroll buttons are shown, when they become visible, and how users can interact with them to navigate through the list."auto" | "hidden" | "scroll"

Defines or retrieves the behavior of the ListMenu's scroll buttons, specifying how they appear and function when the menu content exceeds the visible area. This property controls whether scroll buttons are shown, when they become visible, and how users can interact with them to navigate through the list.

Allowed Values

  • "auto" - The scroll buttons are automatically shown/hidden depending on the visibility of the items. If there's an item that is not visible the appropriate scroll button will appear in order to fully scroll to it.
  • "hidden" - The scroll buttons are hidden.
  • "scroll" - The scroll buttons are always visible.

Default value

"auto"
Try a demo showcasing the overflow property.

Examples

Markup and runtime examples for overflow:

HTML:

<smart-list-menu overflow="hidden"></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.overflow = "scroll";

Read the current value:

const el = document.querySelector('smart-list-menu');
const overflow = el.overflow;

readonlyIf the element has the "readonly" attribute, users can view its content but cannot modify or edit it. While the element remains focusable and its text can be selected or copied, any user attempts to change its value will be blocked, ensuring the data remains unchanged.boolean

If the element has the "readonly" attribute, users can view its content but cannot modify or edit it. While the element remains focusable and its text can be selected or copied, any user attempts to change its value will be blocked, ensuring the data remains unchanged.

Default value

false

Examples

Markup and runtime examples for readonly:

HTML attribute:

<smart-list-menu readonly></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.readonly = true;

Read the current value:

const el = document.querySelector('smart-list-menu');
const readonly = el.readonly;

rightToLeftSpecifies or retrieves a value that determines whether the element's text and layout direction are set to support right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element and its contents will display text and align elements according to RTL conventions.boolean

Specifies or retrieves a value that determines whether the element's text and layout direction are set to support right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element and its contents will display text and align elements according to RTL conventions.

Default value

false
Try a demo showcasing the rightToLeft property.

Examples

Markup and runtime examples for rightToLeft:

HTML attribute:

<smart-list-menu right-to-left></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.rightToLeft = false;

Read the current value:

const el = document.querySelector('smart-list-menu');
const rightToLeft = el.rightToLeft;

scrollModeSpecifies whether to display a traditional scrollbar or custom scroll buttons when the content exceeds the boundaries of an element’s container. This setting controls the method users can use to navigate overflow content within the element."scrollbar" | "scrollButtons"

Specifies whether to display a traditional scrollbar or custom scroll buttons when the content exceeds the boundaries of an element’s container. This setting controls the method users can use to navigate overflow content within the element.

Allowed Values

  • "scrollbar" - displays scrollbar
  • "scrollButtons" - displays scroll buttons

Default value

"scrollbar"
Try a demo showcasing the scrollMode property.

Examples

Markup and runtime examples for scrollMode:

HTML:

<smart-list-menu scroll-mode="scrollButtons"></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.scrollMode = "scrollbar";

Read the current value:

const el = document.querySelector('smart-list-menu');
const scrollMode = el.scrollMode;

themeSpecifies the visual theme to apply to the element. The selected theme controls the element’s overall appearance, including colors, fonts, and styling, ensuring a consistent look and feel throughout the user interface.string

Specifies the visual theme to apply to the element. The selected theme controls the element’s overall appearance, including colors, fonts, and styling, ensuring a consistent look and feel throughout the user interface.

Default value

""

Examples

Markup and runtime examples for theme:

HTML:

<smart-list-menu theme="blue"></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.theme = "red";

Read the current value:

const el = document.querySelector('smart-list-menu');
const theme = el.theme;

unfocusableWhen set to true, the element becomes unfocusable, meaning it cannot receive input focus via keyboard navigation (such as the Tab key), mouse clicks, or scripting methods.boolean

When set to true, the element becomes unfocusable, meaning it cannot receive input focus via keyboard navigation (such as the Tab key), mouse clicks, or scripting methods.

Default value

false

Examples

Markup and runtime examples for unfocusable:

HTML attribute:

<smart-list-menu unfocusable></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.unfocusable = false;

Read the current value:

const el = document.querySelector('smart-list-menu');
const unfocusable = el.unfocusable;

unlockKeyDefines or retrieves the unlockKey property, a unique identifier or code required to unlock and grant access to the product’s features or content.string

Defines or retrieves the unlockKey property, a unique identifier or code required to unlock and grant access to the product’s features or content.

Default value

""

Examples

Markup and runtime examples for unlockKey:

HTML:

<smart-list-menu unlock-key=""></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.unlockKey = "1111-2222-3333-4444-5555";

Read the current value:

const el = document.querySelector('smart-list-menu');
const unlockKey = el.unlockKey;

valueMemberSpecifies the name of the field in the data source whose value will be assigned as the item's value property. This field is used to uniquely identify each item within the data collection.string

Specifies the name of the field in the data source whose value will be assigned as the item's value property. This field is used to uniquely identify each item within the data collection.

Default value

"value"

Examples

Markup and runtime examples for valueMember:

HTML:

<smart-list-menu value-member="info"></smart-list-menu>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-list-menu');
el.valueMember = "details";

Read the current value:

const el = document.querySelector('smart-list-menu');
const valueMember = el.valueMember;

Events

expandThis event is triggered whenever a smart-menu-items-group component is expanded by the user, indicating that the associated menu group has been opened to reveal its child menu items. Developers can use this event to perform actions such as loading dynamic content, updating UI states, or triggering additional functionality when a menu group becomes visible.CustomEvent

This event is triggered whenever a smart-menu-items-group component is expanded by the user, indicating that the associated menu group has been opened to reveal its child menu items. Developers can use this event to perform actions such as loading dynamic content, updating UI states, or triggering additional functionality when a menu group becomes visible.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onExpand

Arguments

evCustomEvent
ev.detailObject
ev.detail.item - The menu item that was expanded.
ev.detail.label - The label of the item that was expanded.
ev.detail.value - The value of the item that was expanded.
ev.detail.path - The path of the item that was expanded, e.g. '0.1', '1.1.2'.
ev.detail.children - The children of the item that was expanded.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the expand event.

Examples

Listen for expand using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-list-menu')?.addEventListener('expand', (event) => {
    const detail = event.detail,
        item = detail.item,
        label = detail.label,
        value = detail.value,
        path = detail.path,
        children = detail.children;

	// event handling code goes here.
})

itemCheckChangeThis event is triggered whenever the checked or unchecked state of a menu item is modified—such as when a user selects or deselects a checkbox or toggle option within a menu. It allows you to respond to changes in the check state of menu items, enabling dynamic UI updates or additional actions based on the user's selection.CustomEvent

This event is triggered whenever the checked or unchecked state of a menu item is modified—such as when a user selects or deselects a checkbox or toggle option within a menu. It allows you to respond to changes in the check state of menu items, enabling dynamic UI updates or additional actions based on the user's selection.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onItemCheckChange

Arguments

evCustomEvent
ev.detailObject
ev.detail.item - The menu item which state was changed.
ev.detail.label - The label of the item which state was changed.
ev.detail.value - The value of the item which state was changed.
ev.detail.checked - The checked state of the toggled item. If false the item is not toggled.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Examples

Listen for itemCheckChange using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-list-menu')?.addEventListener('itemCheckChange', (event) => {
    const detail = event.detail,
        item = detail.item,
        label = detail.label,
        value = detail.value,
        checked = detail.checked;

	// event handling code goes here.
})

itemClickThis event is triggered whenever a user interacts with the menu by clicking on one of its list items. The event provides details about the specific item selected, allowing you to execute custom logic in response to the user's selection.CustomEvent

This event is triggered whenever a user interacts with the menu by clicking on one of its list items. The event provides details about the specific item selected, allowing you to execute custom logic in response to the user's selection.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onItemClick

Arguments

evCustomEvent
ev.detailObject
ev.detail.item - The menu item that was clicked.
ev.detail.label - The label of the clicked item.
ev.detail.value - The value of the clicked item.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Examples

Listen for itemClick using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-list-menu')?.addEventListener('itemClick', (event) => {
    const detail = event.detail,
        item = detail.item,
        label = detail.label,
        value = detail.value;

	// event handling code goes here.
})

scrollBottomReachedThis event is triggered when the user reaches the bottom of the ListMenu by scrolling. It can be used to detect when additional actions are needed, such as loading more items or displaying a message, once the user has viewed all currently visible content in the ListMenu.CustomEvent

This event is triggered when the user reaches the bottom of the ListMenu by scrolling. It can be used to detect when additional actions are needed, such as loading more items or displaying a message, once the user has viewed all currently visible content in the ListMenu.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onScrollBottomReached

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the scrollBottomReached event.

Examples

Listen for scrollBottomReached using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-list-menu')?.addEventListener('scrollBottomReached', (event) => {
	// event handling code goes here.
})

swipeleftThis event is triggered when the user performs a leftward swipe gesture within the ListMenu component, typically indicating an intent to reveal additional options, delete an item, or navigate to a different view. It is designed to respond exclusively to horizontal swipes that start inside the ListMenu area.CustomEvent

This event is triggered when the user performs a leftward swipe gesture within the ListMenu component, typically indicating an intent to reveal additional options, delete an item, or navigate to a different view. It is designed to respond exclusively to horizontal swipes that start inside the ListMenu area.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onSwipeleft

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Examples

Listen for swipeleft using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-list-menu')?.addEventListener('swipeleft', (event) => {
	// event handling code goes here.
})

swiperightThis event is triggered when the user performs a rightward swipe gesture within the ListMenu component. It can be used to detect and handle user interactions such as revealing additional options, navigating to a new view, or initiating specific actions in response to the right swipe inside the ListMenu area.CustomEvent

This event is triggered when the user performs a rightward swipe gesture within the ListMenu component. It can be used to detect and handle user interactions such as revealing additional options, navigating to a new view, or initiating specific actions in response to the right swipe inside the ListMenu area.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onSwiperight

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Examples

Listen for swiperight using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-list-menu')?.addEventListener('swiperight', (event) => {
	// event handling code goes here.
})

Methods

addItem( Item: HTMLElement, Parent?: HTMLElement | string): voidAppends a new item to the end of the existing list, expanding the list by one element.

Appends a new item to the end of the existing list, expanding the list by one element.

Arguments

ItemHTMLElement

A smart-menu-item to add to the List Menu.

Parent?HTMLElement | string

The smart-menu-items-group (or its id or numeric path) to add the item to.

On the custom element in the DOM (narrow the selector, e.g. to #my-listmenu, if you host multiple widgets):

document.querySelector('smart-list-menu')?.addItem("document.createElement('smart-menu-item')","0");

Try a demo showcasing the addItem method.

back( animation?: boolean): voidNavigates to the previous page within the group of menu items (`smart-menu-items-group`). This function moves the user’s focus or view to the preceding set of menu options, enabling seamless backward navigation in multi-page or scrollable menu interfaces.

Navigates to the previous page within the group of menu items (`smart-menu-items-group`). This function moves the user’s focus or view to the preceding set of menu options, enabling seamless backward navigation in multi-page or scrollable menu interfaces.

Arguments

animation?boolean

If set to false, disables collapse animation even if animation is enabled for the element

On the custom element in the DOM (narrow the selector, e.g. to #my-listmenu, if you host multiple widgets):

document.querySelector('smart-list-menu')?.back();

Try a demo showcasing the back method.

changePage( id: string): voidNavigates the user to a specific page or section within the application identified as "smart-menu-items-group." This action typically triggers a transition or redirect, bringing the "smart-menu-items-group" content into view for the user. Suitable for menu navigation or directing users to targeted groups within a menu structure.

Navigates the user to a specific page or section within the application identified as "smart-menu-items-group." This action typically triggers a transition or redirect, bringing the "smart-menu-items-group" content into view for the user. Suitable for menu navigation or directing users to targeted groups within a menu structure.

Arguments

idstring

The id or numeric path of a page (smart-menu-items-group).

On the custom element in the DOM (narrow the selector, e.g. to #my-listmenu, if you host multiple widgets):

document.querySelector('smart-list-menu')?.changePage("0.0");

Try a demo showcasing the changePage method.

checkItem( item: HTMLElement | string): voidMarks an item as checked, indicating that it has been selected or completed. This action typically updates the item's status property (e.g., `checked: true`) within the JSON data.

Marks an item as checked, indicating that it has been selected or completed. This action typically updates the item's status property (e.g., `checked: true`) within the JSON data.

Arguments

itemHTMLElement | string

smart-menu-item/smart-menu-items-group (or its id or numeric path).

On the custom element in the DOM (narrow the selector, e.g. to #my-listmenu, if you host multiple widgets):

document.querySelector('smart-list-menu')?.checkItem("0.0");

getItem( id: string): HTMLElementRetrieves a specific item using either its unique identifier (ID) or a numeric path that locates the item within a hierarchical structure.

Retrieves a specific item using either its unique identifier (ID) or a numeric path that locates the item within a hierarchical structure.

Arguments

idstring

The id or numeric path of an item

ReturnsHTMLElement

On the custom element in the DOM (narrow the selector, e.g. to #my-listmenu, if you host multiple widgets):

const result = document.querySelector('smart-list-menu')?.getItem("0.0");

maximize(): voidExpands the List Menu to its maximum available size, displaying all menu items for full visibility and easier selection.

Expands the List Menu to its maximum available size, displaying all menu items for full visibility and easier selection.

On the custom element in the DOM (narrow the selector, e.g. to #my-listmenu, if you host multiple widgets):

document.querySelector('smart-list-menu')?.maximize();

minimize(): voidCollapses the List Menu to save screen space. When minimized, the full menu is hidden and replaced with a single icon, allowing users to expand the menu again if needed. This improves the user interface by providing a cleaner, less cluttered appearance while maintaining quick access to menu options.

Collapses the List Menu to save screen space. When minimized, the full menu is hidden and replaced with a single icon, allowing users to expand the menu again if needed. This improves the user interface by providing a cleaner, less cluttered appearance while maintaining quick access to menu options.

On the custom element in the DOM (narrow the selector, e.g. to #my-listmenu, if you host multiple widgets):

document.querySelector('smart-list-menu')?.minimize();

removeItem( item: HTMLElement | string): voidRemoves a specified item from the collection or list. If the item exists, it is deleted; otherwise, no changes are made. This operation typically identifies the item by its unique key, index, or value.

Removes a specified item from the collection or list. If the item exists, it is deleted; otherwise, no changes are made. This operation typically identifies the item by its unique key, index, or value.

Arguments

itemHTMLElement | string

The smart-menu-item/smart-menu-items-group (or its id or numeric path) to remove.

On the custom element in the DOM (narrow the selector, e.g. to #my-listmenu, if you host multiple widgets):

document.querySelector('smart-list-menu')?.removeItem("0.0");

uncheckItem( item: HTMLElement | string): voidRemoves the checkmark from a selected item, resetting its state to unchecked or unselected. This action is typically used to indicate that the item is not active, chosen, or included in a selection.

Removes the checkmark from a selected item, resetting its state to unchecked or unselected. This action is typically used to indicate that the item is not active, chosen, or included in a selection.

Arguments

itemHTMLElement | string

smart-menu-item/smart-menu-items-group (or its id or numeric path).

On the custom element in the DOM (narrow the selector, e.g. to #my-listmenu, if you host multiple widgets):

document.querySelector('smart-list-menu')?.uncheckItem("0.0");

CSS Variables

--smart-list-menu-default-widthvar()

Default value

"var(--smart-box-width)"

smartListMenu default width

--smart-list-menu-default-heightvar()

Default value

"var(--smart-box-height)"

smartListMenu default height

--smart-list-menu-filter-input-vertical-offsetvar()

Default value

"5px"

Defines vertical offset of the ListMenu's filter input.

--smart-list-menu-filter-input-horizontal-offsetvar()

Default value

"5px"

Defines horizontal offset of the ListMenu's filter input.