UI MarCom 3
Latest (3.5.1)
Previous versions
UI MarCom
Getting Started
About UI MarCom Develop Design
Fundamentals
Overview Colors Elevation Icons Image Aspect Ratios Interaction Responsive Behavior Spacing States Typography
Components
Component status Overview Accordion Alerts Application Bar Aspect Ratio Back to top Breadcrumbs Button Card Slider Cards Carousel Checkboxes Collection Country and Language Selector Date-Time-Picker Disclaimer Dropdown Eyecatcher Feedback Module Figure Footer Header Hero Block Hotspots Label Links Lists Loading Animation Log In Dialog Logo Media Object Menu Modal Dialog Multi-column Navigation bar Overlay Pagination Progress Quotation Radio Buttons Search Field Search Results Select Box Stage Steps Bar Table Tabs Tags Textfield Toggle Button Group Toggle Switch Tooltip User Identifier Value Slider
Updates
Component Library Changelog Design Files Changelog
Help
Contact us

Menu Stable Dark theme

With a Menu users can make a selection from a number of options in a vertical list.

Usage Code
<uimc-menu>
  <uimc-menu-item selected></uimc-menu-item>
  <uimc-menu-item></uimc-menu-item>
</uimc-menu>
AttributeDescriptionValuesDefault
themeSet the color scheme of the componentlight, darklight

SlotSlotted content
defaultNest some <uimc-menu-item>
AttributeDescriptionValuesDefault
selectedSets the currently selected item––

CallbackArgumentDescription
onClickeventPass a callback function that gets triggered when a menu item is clicked

SlotSlotted content
defaultItem name or a hyperlink

Working sample

Menu Item 1Menu Item 2Menu Item 3Menu Item 4Menu Item 5
<uimc-menu>
  <uimc-menu-item selected></uimc-menu-item>
  <uimc-menu-item></uimc-menu-item>
</uimc-menu>

Dark theme

Menu Item 1Menu Item 2Menu Item 3
<uimc-menu theme="dark">
  <uimc-menu-item>Menu Item 1</uimc-menu-item>
  <uimc-menu-item selected>Menu Item 2</uimc-menu-item>
  <uimc-menu-item>Menu Item 3</uimc-menu-item>
</uimc-menu>