Skip to content

TWebSideMenu

Below is a list of the most important properties methods and events for the TWebSideMenu. TWebSideMenu is a component to offer typical admin web page menu/navigation capabilities.

!
Designtime Runtime (Expanded/Collapsed)

TWebSideMenu architecture

HTML template tag

The HTML tag the component can be associated with in an HTML template. Assign the ID attribute with a unique value and set the identical value to the ElementID property. Detailed information can be found in the Use of HTML templates topic.

HTML tag <VIDEO ID=”UniqueID”></VIDEO>
ElementID UniqueID

Properties for TWebSideMenu

Property Description
Appearance: TSideMenuAppearance Configure the appearance of the menu
Content: TStringList Set the text displayed in the content area
ElementBodyClassName: TElementClassName Optionally sets the CSS classname for the label when styling via CSS is used
ElementCaptionClassName: TElementClassName Optionally sets the CSS classname for the label when styling via CSS is used
ElementContentClassName: TElementClassName Optionally sets the CSS classname for the label when styling via CSS is used
ElementFixedItemsClassName: TElementClassName Optionally sets the CSS classname for the label when styling via CSS is used
ElementItemsClassName: TElementClassName Optionally sets the CSS classname for the label when styling via CSS is used
FixedItems: TSideMenuItems List of items displayed in "Fixed" bottom part of the menu
Items: TSideMenuItems List of items displayed in the side menu
SelectedItem: Integer Sets the index of the selected item from the Items collection

Appearance Properties

Property Description
Caption: string Set the caption text
CaptionColor: TColor Set the caption background color
CaptionPopup: string Set the caption text in Popup State
CaptionVisible: string Sets if the Caption area is visible or not
CaptionFont: TFont Sets the font used for the Caption text
ItemFont: TFont Sets the font used for the Item text
ItemHoverColor: TColor Sets the background color when an item is hovered
ItemHoverTextColor: TColor Sets the text color when an item is hovered
ItemSelectedColor: TColor Sets the background color when an item is selected
ItemSelectedTextColor: TColor Sets the text color when and item is selected
ItemSelectionStyle: TSideMenuItemSelectionStyle Sets if the item selection is displayed as a full row (itsFull) or as rounded box (itsRounded)
ItemCollapsedMaterialGlyph: TMaterialGlyph Sets the material icon displayed for an item with subitems that is collapsed
ItemExpandedMaterialGlyph: TMaterialGlyph Sets the material icon displayed for an item with subitems that is expanded
FixedColor: TColor Sets the background color of the fixed bottom area of the menu
FixedHeight: Integer Sets the height of the fixed bottom area of the menu
FixedVisible: Boolean Sets if the fixed bottom area is displayed or not
FixedItemFont: TFont Sets the font used for the FixedItem text
FixedItemHoverColor: TColor Sets the background color when a fixed item is hovered
FixedItemHoverTextColor: TColor Sets the text color when a fixed item is hovered
FixedItemSelectedColor: TColor Sets the background color when a fixed item is selected
FixedItemSelectedTextColor: TColor Sets the text color when a fixed item is selected
States: TSideMenuStates Sets which menu States are enabled. Available states: msCollapsed: The menu is displayed minimized with icons only. msExpanded: The menu is displayed fully with icon, text and badge or control/html. msPopup: The menu is hidden and the visibility can be toggled manually by clicking the hamburger icon in the top left corner. When visible the menu is displayed fully with icon, text and badge or control/html. All 3 states are enabled by default. If enabled, the state is automatically changed to msPopup when the window is less than 768 pixels wide, msCollapsed when between 768 pixels and 1024 pixels wide or msExpanded when wider than 1024 pixels.

Items/FixedItems Properties

Property Description
ContentControl: TCustomControl Sets the Control displayed in the Content area when the Item is selected
Enabled: Boolean Sets if the Item is enabled or not
Hint: string Sets the hint text displayed when the item is hovered
ImageURL: string Sets the url of the image displayed when the menu is in msExpanded or msPopup state
ImageURLCollapsed: string Sets the url of the image displayed when the menu is in msCollapsed state
Text: string Sets the item text
&Type: TSideMenuType Sets the type of the item. Available types are: itText: The default type. itCheckBox: A checkbox is displayed next to the item text. itDivider: The item is displayed as a divider line between items. itControl: The control assigned in the Control property is displayed. itHTML: The HTML assigned in the HTML property is displayed. itTitle: The item is displayed as a title with interaction disabled.
Checked: Boolean Sets if the checkbox is checked when item Type is set to itCheckBox
Expanded: Boolean Sets if the item is displayed in Expanded state when it has SubItems defined.
SubItem: Boolean Sets if the item is a SubItem. The first item before this item with SubItem set to False will be displayed as an Expand/Collapse item
HTML: TStringList Sets the HTML displayed when item Type is set to itHTML
Control: TControl Sets the Control displayed when item Type is set to itControl
MaterialGlyph: TMaterialGlyph Sets the Material icon displayed before the item Text
MaterialGlyphType: TMaterialGlyphType Sets the type of MaterialGlyph used
BadgeText: string When not an empty string, displays the value as Badge next to the item
BadgeColor: TColor Sets the background color of the BadgeText
BadgeTextColor: TColor Sets the text color of the BadgeText

Methods for TWebSideMenu

Property Description
Close Method to close the menu programmatically when in Popup state
Open Method to open the menu programmatically when in Popup state.

Events for TWebSideMenu

Property Description
OnItemClick Event triggered when an item is clicked.
OnFixedItemClick Event triggered when a fixed item is clicked.