The menu component is the listing structure with optional headers to create menus.
Commonly used as the contents when composing “dropdowns”, “contextual menus”, “mega menu”, etc, when paired with the popover component.
Although the following examples use the <h3> tag for the title element, the styling provided by Fiori Fundamentals will remain consistent for any heading level used. <h1> should be reserved for the page title.
The basic stucture of a menu.
Menu list with separated items
Use a modifier on the list element to add separators between the items.
Menu with group headers
You can optionally add hierarchy to menus by grouping sub-menus and adding headers.
Menu with an addon container
This is an additional container that can be used for an icon or checkbox before the meni item text.