3. Drop-down menu

You can toggle it with the top right ellipsis button | Material-ish-ness

I combined it with a card ⬜.

How it works:

A div has a child div which is the toggle button and another child div which is the actual menu.

The toggle button is a div with some padding to make clicking easier (i.e on a bigger surface). When clicked, the component’s state toggle an active property that determines whether the menu is shown or not and whether the toggle button has a gray background or not.

The menu is a div that contains a ul . The active state’s property determines if this div is expanded or collapsed (aka shown or hidden).

The menu items are passed by property using an array of objects that hold: label | icon | onClick with onClick being an actual function.

Problems solved / Advantages:

Provide an easy to integrate menu to any component (kind of a contextual menu)