Pie menu

A two-level menu: each wedge opens its options on an outer ring that covers only its own slice.

Click a wedge, or Tab to it and press Enter. Escape closes the submenu.

How it's built

  • Three <o-arc> without value split the inner ring into 120° wedges. Their text is drawn along the arc, and flip keeps the bottom one readable.
  • Each submenu is a ring on orbit-10 with --o-range: 120deg and the --o-from of its wedge. Its options split that slice evenly, so they always sit right outside the wedge that opened them.
  • interactive lets an arc take the pointer and focus; the rest of the square stays click-through. Hover and focus use scale, which adds to the rotate Orbit places arcs with.
  • Closed submenus are faded and scaled to 90% from the center, so opening one grows it outward.
  • Wedges are menuitems with aria-expanded, style options are menuitemcheckboxes, and only the open submenu is in the Tab order.

Related