Usage
Menu listing comes with sub components such as menu group, menu divider or sub menu. They give chance to drop-down menu items.
Guidance
- Dropdowns should list multiple items.
- They should be discoverable and easy to identify.
- Always have a text label. Icons are optional.
- Make Dropdowns look and feel hoverable.
- If using menus, divide or group them.
- Able to add multiple menu items by using + icon near Dropdown component on page tree.
When to use
- Use Dropdowns to give clickable or hoverable menu.
Additional info
- Consider using an Icon Dropdown in dense environments.
- Consider using Text Dropdowns for actions that are less important.
- Consider using an Action Bar when presenting the user with one or more high or medium-high actions specific to a task.
- Consider using a Menu Divider when seperating multiple menu lists.
- Consider using a Sub Menu when listing reclickable sub menu items.
- Consider using a Menu Group for breakdowned menu.
Variations
- There are several types of Dropdowns with varying degrees of emphasis. Emphasis determines a Dropdowns’s appearance, placement and breakdown of menu items. Dropdown can be prefered with a button near it, too.
- The updatable properties of Dropdowns are label, icon, type and size.
- The updatable behaviours of Dropdowns are trigger on, placement, show arrow, disabled and button.
- The updatable style features of Dropdowns are margin, padding, size, overflow, typography, background, border, effects and css.
- The updatable style features of Dropdown Icons are margin, padding, typography, border, effects and css.
- The updatable style features of Overlay are margin, padding, typography, background, border, effects and css.
- The updatable style features of Overlay Items are margin, padding, typography, background, border, effects and css.
- The usable dynamic properties of Dropdowns are arrow, disabled, overlayStyle, trigger, icon, placement, overlayClassName, _label, hidden and style.
- The updatable properties of Menu Items are title and icon.
- The updatable behaviours of Menu Items are disabled and danger.
- The usable dynamic properties of Menu Items are title, icon, disabled, danger, hidden and style.
- The updatable property of Menu Group is title.
- The usable dynamic properties of Menu Group are title, hidden and style.
- The updatable properties of Sub Menu are title, icon and popupClassName.
- The updatable behaviour of Sub Menu is disabled.
- The usable dynamic properties of Sub Menu are title, icon, popupClassName, disabled, hidden and style.
- The usable dynamic properties of Menu Divider are title, icon, popupClassName, disabled, hidden and style.