Radial menu<mds-radial-menu>Generated from @maggioli-design-system/magma@2.3.0dist/documentation.json. Encapsulation: shadow.
The first example of the Pattern page, live. Change its props below and the preview follows; Reset brings the example back as it was.
Props
directionenumSpecifies the direction of the menu elements
interactionenumSpecifies how to open the menu
sizeenumSpecifies the size for the button
toneenumSpecifies the tone variant for the button
variantenumSpecifies the color variant for the button
backdropbackdropbooleanSpecifies if the component has a backdrop background
discdiscbooleanSpecifies if the menu has a disc beneath or not
openedopenedbooleanSpecifies if the menu is opened or not
iconstringThe icon displayed in the button
angleEndnumberSpecifies the ending angle of the menu
angleStartnumberSpecifies the starting angle of the menu
radiusnumberSpecifies the radius of the menu
Overview
The <mds-radial-menu> web component is a floating action menu of the Magma Design System that arranges its child items along a circular arc around a central trigger button, expanding them outward when opened. It is the parent of a compound pair: it owns the trigger and the geometry, while each option is supplied as an <mds-radial-menu-item> in the item slot.
Semantic Behavior
Trigger button: Renders a trigger button whose tone, variant and size are forwarded from the host; clicking it toggles the menu open and closed. It is icon-only and named in the page language (the lang of <html>) after what a click does: “Open menu”, then “Close menu”. There is no prop to give it a name of your own yet.Open state: opened is the source of truth for visibility; when set the items animate out along the arc and the trigger icon swaps to a close glyph.Interaction mode: With interaction="rightclick" the trigger is hidden and the menu instead opens on right-click, centred on the cursor.Backdrop: When backdrop is enabled a dimming overlay is shown while the menu is open. It is purely visual: it lets clicks through and does not close the menu.Item registration: Items are read from the item slot; the component assigns each item’s position and propagates the host size down to every <mds-radial-menu-item>.
Properties & Visual Configurations
The internal trigger consumes the shared variant / tone / size ladders defined in agents/variants.md; they default to 'dark' / 'strong' / 'lg' here.
Other behavioral props
angleStart and angleEnd define the angular sweep (in degrees) over which items are distributed; a 360-degree span produces a full ring, while a narrower range produces a fan. Setting angleStart greater than angleEnd reverses the distribution.radius sets the distance (in rem) of the items from the centre, controlling how far they travel when the menu opens.direction chooses whether items lay out 'clockwise' or 'counterclockwise' around the arc.interaction selects how the menu is summoned: 'click' shows the trigger button, 'rightclick' hides it and opens at the cursor.disc renders a decorative disc beneath the menu; icon overrides the default trigger glyph and defaults to the “more-vert” Material icon when unset.