Components/Menu
fd-menu · 11 examples from SAP's documentation · Back to the gallery
About
The menu component is the listing structure with optional headers to create menus. Commonly used as the contents when composing "dropdowns", "contextual menus", etc, when paired with the popover component.
Default
The basic structure of a menu. Place the menu item title in a \
Vertical overflow
The `fd-menu--overflow` modifier class will clip the content and add a vertical scroll to the element. You need to manually set the max-height of the element on the `fd-menu` level. For example: `style=
MobileMode
The basic structure of a menu in mobile where it opens as a dialog. Use class `fd-menu--mobile` on menu container level. Example shows the parent menu\
List with separated items
Separators can be added between Menu Items by adding the \
List different states
Simulate different states to show state behaviour between the items. - For simulating hover state, use class \
List with Icon
To create an addon before or after \
WithSubmenu
Menu with an additional submenu that can be used for items that can be further grouped under a level but not necessarily visible to user always. For a submenu, do the following: - Specify \
Extended Menu List Items (Segmented Button)
Each view of the segmented button gets its own menu item. The selected Button in the Segmented Button gets the Active Dot in front of the Menu List Item and is always separated with a separator. The 'segmented button menu items' cannot have an icon in front. Instead, the place is reserved for the Active Dot.
Extended Menu List Items (Toggle Button)
The toggle button gets “transformed” into a menu item which can be toggled and untoggled. If the toggle button is toggled, then a checkmark appears in front of the text (on position of an icon). If It's not toggled, then the space is empty. It is not possible to show an icon for the toggle button in the menu. This spot is reserved for the checkmark.
Extended Menu List Items (Input)
An Input field can be placed in a menu item. When an input is placed in a menu item, the text serves as a label. When there is enough space on desktop-based devices, then the input field is positioned next to the text. If there's not enough space, it moves to the next line. The input field is always positioned below the label on mobile devices.
Extended Menu List Items (Buttons as Menu Items)
The buttons are “transformed” into menu items. It is optional to add an icon and those could be replaced by product teams.