The Menu component shows a menu at the position of the element used to activate it.



Remember to put the element that activates the menu in the activator slot.


Below is a collection of simple to complex examples.

Absolute Position

Menus can also be placed absolutely on top of the activator element using the absolute prop. Try clicking anywhere on the image.


Menus can be accessed using hover instead of clicking with the hover prop.


Menu can be offset by the X and Y axis to make the activator visible.

Close on Content Click

You can choose the close or not close the menu when the content inside it has been clicked.


You can use different transitions for when the menu is opening and closing using the inbuilt svelte transitions and easing functions.

Ready For More?

Continue to learn more about svelte materialify with content selected by the creator.

Last Updated: 2022-10-03