Pie menu
A two-level menu: each wedge opens its options on an outer ring that covers only its own slice.
How it's built
- Three
<o-arc>withoutvaluesplit the inner ring into 120° wedges. Their text is drawn along the arc, andflipkeeps the bottom one readable. - Each submenu is a ring on
orbit-10with--o-range: 120degand the--o-fromof its wedge. Its options split that slice evenly, so they always sit right outside the wedge that opened them. interactivelets an arc take the pointer and focus; the rest of the square stays click-through. Hover and focus usescale, which adds to therotateOrbit places arcs with.- Closed submenus are faded and scaled to 90% from the center, so opening one grows it outward.
- Wedges are
menuitems witharia-expanded, style options aremenuitemcheckboxes, and only the open submenu is in the Tab order.
Related
- Radial menu demo: one level, with icons
- Orbit Kit menu: a ready-made radial menu
- Knobs and menus
- Arcs