Correct and idiomatic ways to use the <mds-radial-menu> component, ordered from most common to most specialized. Patterns assume a working knowledge of the variant / tone ladders documented in agents/variants.md and the shared component rules in agents/conventions.md. <mds-radial-menu> is a compound component: it always needs one or more mds-radial-menu-item children placed in the item slot.

Basic Radial Menu

The minimal form: a trigger button with items arranged in a full ring. Each item requires icon (a slug from the Magma icon library) and tooltip (the accessible label shown on hover). The parent propagates its size down to every item automatically.

<mds-radial-menu>
  <mds-radial-menu-item slot="item" icon="mi/baseline/favorite" tooltip="Aggiungi ai preferiti" variant="dark" tone="weak"></mds-radial-menu-item>
  <mds-radial-menu-item slot="item" icon="mi/baseline/email" tooltip="Invia email" variant="dark" tone="weak"></mds-radial-menu-item>
  <mds-radial-menu-item slot="item" icon="mi/baseline/print" tooltip="Stampa" variant="dark" tone="weak"></mds-radial-menu-item>
  <mds-radial-menu-item slot="item" icon="mi/baseline/delete" tooltip="Elimina" variant="error"></mds-radial-menu-item>
</mds-radial-menu>

Trigger Button Variant and Tone

Use variant and tone to style the central trigger button to match the surrounding UI. Defaults are variant="dark" and tone="strong".

<!-- Primary trigger in a content area -->
<mds-radial-menu variant="primary" tone="strong">
  <mds-radial-menu-item slot="item" icon="mi/baseline/edit" tooltip="Modifica" variant="primary" tone="weak"></mds-radial-menu-item>
  <mds-radial-menu-item slot="item" icon="mi/baseline/ios-share" tooltip="Condividi" variant="primary" tone="weak"></mds-radial-menu-item>
  <mds-radial-menu-item slot="item" icon="mi/baseline/delete" tooltip="Elimina" variant="error" tone="weak"></mds-radial-menu-item>
</mds-radial-menu>

<!-- Light trigger: painted in the paper of the mode (white in light mode, black in dark mode) -->
<mds-radial-menu variant="light" tone="weak">
  <mds-radial-menu-item slot="item" icon="mi/baseline/favorite" tooltip="Aggiungi ai preferiti" variant="light"></mds-radial-menu-item>
  <mds-radial-menu-item slot="item" icon="mi/baseline/ios-share" tooltip="Condividi" variant="light"></mds-radial-menu-item>
</mds-radial-menu>

Fan Layout with Angle Range

Restrict angle-start and angle-end to create a fan instead of a full ring. This is useful when the component is positioned in a corner of a card or image where a full ring would overlap content.

<!-- Quarter-circle fan opening toward the top-left, placed at the bottom-right corner -->
<mds-radial-menu angle-start="180" angle-end="270" direction="counterclockwise" radius="5">
  <mds-radial-menu-item slot="item" icon="mi/baseline/favorite" tooltip="Aggiungi ai preferiti" variant="light"></mds-radial-menu-item>
  <mds-radial-menu-item slot="item" icon="mi/baseline/ios-share" tooltip="Condividi" variant="light"></mds-radial-menu-item>
  <mds-radial-menu-item slot="item" icon="mi/baseline/delete" tooltip="Elimina" variant="error"></mds-radial-menu-item>
</mds-radial-menu>

Adjusting the Radius

Set radius (in rem) to control how far items travel from the trigger when the menu opens. Increase it when items would otherwise overlap; decrease it in constrained layouts.

<mds-radial-menu radius="7" variant="primary" tone="outline">
  <mds-radial-menu-item slot="item" icon="mi/baseline/edit" tooltip="Modifica" variant="primary" tone="weak"></mds-radial-menu-item>
  <mds-radial-menu-item slot="item" icon="mi/baseline/content-copy" tooltip="Copia" variant="primary" tone="weak"></mds-radial-menu-item>
  <mds-radial-menu-item slot="item" icon="mi/baseline/delete" tooltip="Elimina" variant="error" tone="weak"></mds-radial-menu-item>
</mds-radial-menu>

Controlling the Open State Programmatically

The opened attribute reflects the menu’s open state and can be set from JavaScript to open or close the menu without a user interaction. Remove the attribute (or set the prop to undefined; false is normalized to undefined too) to close it - do not write opened="false" in markup.

<mds-radial-menu id="menu-azioni">
  <mds-radial-menu-item slot="item" icon="mi/baseline/edit" tooltip="Modifica" variant="dark" tone="weak"></mds-radial-menu-item>
  <mds-radial-menu-item slot="item" icon="mi/baseline/delete" tooltip="Elimina" variant="error" tone="weak"></mds-radial-menu-item>
</mds-radial-menu>

<script>
  const menu = document.querySelector('#menu-azioni');
  // open programmatically
  menu.opened = true;
  // close programmatically
  menu.opened = undefined;
</script>

Contextual (Right-Click) Menu with Backdrop

Set interaction="rightclick" to hide the trigger button and open the menu at the cursor position on a context-menu event. Add backdrop to dim the page while the menu is open (the overlay is visual only: it does not block clicks).

<mds-radial-menu interaction="rightclick" disc backdrop>
  <mds-radial-menu-item slot="item" icon="mi/baseline/favorite" tooltip="Aggiungi ai preferiti" variant="dark" tone="text"></mds-radial-menu-item>
  <mds-radial-menu-item slot="item" icon="mi/baseline/email" tooltip="Invia email" variant="dark" tone="text"></mds-radial-menu-item>
  <mds-radial-menu-item slot="item" icon="mi/baseline/insert-drive-file" tooltip="Nuovo documento" variant="dark" tone="text"></mds-radial-menu-item>
  <mds-radial-menu-item slot="item" icon="mi/baseline/info" tooltip="Informazioni" variant="dark" tone="text"></mds-radial-menu-item>
  <mds-radial-menu-item slot="item" icon="mi/baseline/print" tooltip="Stampa" variant="dark" tone="text"></mds-radial-menu-item>
  <mds-radial-menu-item slot="item" icon="mi/baseline/delete" tooltip="Elimina" variant="error" tone="text"></mds-radial-menu-item>
</mds-radial-menu>

Disc Decoration

Enable the disc attribute to render a decorative circular background beneath the items, visually grouping the open menu. Combine with backdrop for modal-style emphasis.

<mds-radial-menu disc variant="dark" tone="strong">
  <mds-radial-menu-item slot="item" icon="mi/baseline/edit" tooltip="Modifica" variant="dark" tone="weak"></mds-radial-menu-item>
  <mds-radial-menu-item slot="item" icon="mi/baseline/ios-share" tooltip="Condividi" variant="dark" tone="weak"></mds-radial-menu-item>
  <mds-radial-menu-item slot="item" icon="mi/baseline/delete" tooltip="Elimina" variant="error" tone="weak"></mds-radial-menu-item>
</mds-radial-menu>

Custom Trigger Icon

Override the default “more-vert” glyph with any slug from the Magma icon library using the icon prop. The trigger automatically switches to the close icon while the menu is open.

<mds-radial-menu icon="mi/baseline/add" variant="primary" tone="strong">
  <mds-radial-menu-item slot="item" icon="mi/baseline/edit" tooltip="Modifica" variant="primary" tone="weak"></mds-radial-menu-item>
  <mds-radial-menu-item slot="item" icon="mi/baseline/content-copy" tooltip="Duplica" variant="primary" tone="weak"></mds-radial-menu-item>
  <mds-radial-menu-item slot="item" icon="mi/baseline/delete" tooltip="Elimina" variant="error" tone="weak"></mds-radial-menu-item>
</mds-radial-menu>

Sizing

Use the size prop to resize the trigger button and all items simultaneously. Do not override dimensions with inline width / height.

<mds-radial-menu size="sm" variant="dark" tone="strong">
  <mds-radial-menu-item slot="item" icon="mi/baseline/edit" tooltip="Modifica" variant="dark" tone="weak"></mds-radial-menu-item>
  <mds-radial-menu-item slot="item" icon="mi/baseline/delete" tooltip="Elimina" variant="error" tone="weak"></mds-radial-menu-item>
</mds-radial-menu>

Styling Customization

Style the component through its documented --mds-radial-menu-* CSS custom properties. Use semantic color roles wrapped in rgb(var(--magma-<role>)) so dark mode and high-contrast modes keep working. Set the radius and the angles with the radius, angle-start and angle-end props: the component writes --mds-radial-menu-radius, --mds-radial-menu-angle-start and --mds-radial-menu-angle-end inline on the host, so a stylesheet cannot override them.

.my-context mds-radial-menu {
  --mds-radial-menu-transition-duration: 300ms;
  --mds-radial-menu-disc-background: rgb(var(--magma-surface-overlay) / 0.8);
  --mds-radial-menu-disc-size: 12rem;
}