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>