El menú de tres puntos es un menú desplegable tipo lista al cual puedes añadirle las opciones que desees. Su estructura es la siguiente:
<div class="meatballs-menu">
<button class="meatballs-menu__button"></button>
<nav class="meatballs-menu__nav">
<ul class="meatballs-menu__list">
<li class="meatballs-menu__item">
<button class="meatballs-menu__link">Item 1</button>
</li>
<li class="meatballs-menu__item">
<button class="meatballs-menu__link">Item 2</button>
</li>
<li class="meatballs-menu__item">
<button class="meatballs-menu__link">Item 3</button>
</li>
</ul>
</nav>
</div>
Por defecto la lista de items se muestra del lado izquierdo, para que sea del lado derecho se debe añadir la clase meatballs-menu--right
. Para cambiar la orientación del ícono se utiliza la clase meatballs-menu--horizontal
y para cambiar el color a blanco meatballs-menu--white
. Para cerrar el menú se debe dar click en cualquier parte de la página o presionando la tecla ESC.