Menu - CSS API Reference

All Common CSS variables:

Specific CSS variables for Menu styling:

• --smart-menu-default-width: Menu default width.
• --smart-menu-default-height: Menu default height.
• --smart-menu-vertical-default-width: Vertical and Context Menu default width.
• --smart-menu-vertical-default-height: Vertical and Context Menu default height.
• --smart-menu-scroll-button-size: Menu scroll buttons size. Horizontal Menu scroll buttons width = Vertical Menu scroll buttons height.

The following CSS selectors can be used to style Menu:

• smart-menu - applied to the whole Menu 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 Menu's hamburger icon that appears when the element is minimized.
      • .smart-hamburger-icon-custom-container - applied to the container of the custom minimize icon (visible when the property minimizeIconTemplate is set).
    • .smart-menu-scroll-button - applied to Menu scroll buttons.
      • .smart-scroll-button-near - applied to left/top scroll buttons.
      • .smart-scroll-button-far - applied to right/bottom scroll buttons.
        • .smart-arrow - applied to scroll button arrows.
    • .smart-menu-main-container - applied to the container of top-level smart-menu-item and smart-menu-items-group elements.
      • .smart-menu-minimized-items-container - applied to the container of all smart-menu-item and smart-menu-items-group elements when the Menu is minimized or when the property mode is set to 'tree'.
      • 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-drop-down - applied to the dropdown of the items group. It contains the actual child item container (.smart-menu-item-container) and, optionally, scroll buttons.
          • .smart-menu-item-container - applied to the child item container.
      • 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.

Demo

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