Menu
The Menu component presents a list of options or actions, typically in a navigable format. Menus can be horizontal for top-level navigation or vertical for sidebars or dropdowns.
They are fundamental for site navigation, offering an organized and accessible way for users to explore different sections of a website or application.
Examples
Various examples showcasing different configurations of the component
Examples
Property
Value
Items
[{"label":"Item 1","value":"item1","prefixIcon":"Search"},{"label":"Item 2","value":"item2","prefixIcon":"Home"}]
Alignment
Property
Value
Items
[{"label":"Item 1","value":"item1","prefixIcon":"Search"},{"label":"Item 2","value":"item2","prefixIcon":"Home"}]
Align items
CENTER
Properties
Each component can be customized and configured based on product requirements. You can modify the component on Canonic by clicking on the component and opening the configuration panel.
Property
Description
Default Value
Type
Elevation
The elevation level of the container.
1
String
BG Color
The background color of the container.
#FFFFFF
Color
Size
Size of the submenu.
Large
String
Items
The items to be displayed in the sidebar.
Array
Align items
Alignment of items in the menu.
Left
String
Triggers
Components expose certain events such as clicking. You can use these events to perform actions such as navigation, fetching data and controlling other components. The events exposed by this component are listed below.
Property
Description
On click
Triggered when the card is clicked.
On double click
Triggered when the card is double clicked.