List Menu CSS API Reference

All Common CSS variables:

    Specific CSS variables for List Menu styling:

    • --smart-list-menu-default-width: ListMenu default width.
    • --smart-list-menu-default-height: ListMenu default height.
    • --smart-list-menu-filter-input-vertical-offset: Defines vertical offset of the ListMenu's filter input.
    • --smart-list-menu-filter-input-horizontal-offset: Defines horizontal offset of the ListMenu's filter input.

    The following CSS selectors can be used to style List Menu:

    • smart-list-menu - applied to the whole ListMenu element. Can be used for setting width, height and border-, color- and font-related CSS properties.
      • .smart-container - the container that holds all of the internals of the element. Shoudn't be used for styling.
        • .smart-hamburger-icon - applied to the ListMenu's hamburger icon that appears when the element is minimized.
          • .smart-hamburger-icon-line .smart-hamburger-icon-line-top - one of the three lines used for the 'Hamburger' icon.
          • .smart-hamburger-icon-line .smart-hamburger-icon-line-center - one of the three lines used for the 'Hamburger' icon.
          • .smart-hamburger-icon-line .smart-hamburger-icon-line-bottom - one of the three lines used for the 'Hamburger' icon.
          • .smart-hamburger-icon-custom-container - applied to the container of the custom minimize icon (visible when the property minimizeIconTemplate is set).
        • .smart-list-menu-view - applied to the main ListMenu view. When the element is minimized, it acts as a dropdown.
          • .smart-list-menu-view-minimized - applied to the main ListMenu view when the element is minimized.
          • .smart-header - applied to the ListMenu header.
            • smart-button - represents the "back" button in the header.
              • .smart-arrow .smart-arrow-left - used for the icon of the button.
            • .smart-title - appied to the title in the header.
          • .smart-list-menu-filter-input - applied to the filter input.
          • .smart-menu-scroll-button .smart-spin-button .smart-scroll-button-near - applied to ListMenu top scroll button.
            • .smart-arrow .smart-arrow-up - a container for the actual icon of the button.
          • .smart-menu-scroll-button .smart-spin-button .smart-scroll-button-far - applied to ListMenu bottom scroll button.
            • .smart-arrow .smart-arrow-down - a container for the actual icon of the button.
          • .smart-menu-main-container - applied to the container of smart-menu-item and smart-menu-items-group elements.
            • smart-menu-items-group - custom element that represents an HTML and a logical container of Menu items.
              • .smart-menu-item-label-element - applied to the label of the items group.
              • .smart-menu-items-group-arrow - applied to the arrow of the items group.
            • smart-menu-item - custom element that represents a Menu item.
              • .smart-menu-item-label-element - applied to the label of the item
              • .smart-menu-item-shortcut - applied to the helper label of the item, that can be used to indicate a helper text, such as a keyboard shortcut.
          • .smart-loader-container - applied to the container for the loading indicator.
            • .smart-loader - applied to the loading indicator.
            • .smart-loader-label - applied to the label for the loading indicator.

    Demo

    <style>
            #listmenu{
                    --smart-color: #ccc;
                    --smart-font-size: 20px;
            }
    </style>