diff --git a/site/src/pages/components/menu.explainer.mdx b/site/src/pages/components/menu.explainer.mdx index a24a8db82..0bddde187 100644 --- a/site/src/pages/components/menu.explainer.mdx +++ b/site/src/pages/components/menu.explainer.mdx @@ -409,6 +409,95 @@ simply change its semantics and processing model when it contains a new ` + File + Edit + + + + New + Open + + + + Cut + Copy + Paste + +``` + +... or should they be expressed through DOM tree nesting relationships, +as in this example +(with names that require further discussion if we were to take this approach): + +```html + + + File + + New + Open + + + + Edit + + Cut + Copy + Paste + + + +``` + +... or should both variants be allowed? + +Some considerations for each of these options: + +**ID references** + +* **Precedents**: + * Most libraries that offer menu APIs. + * ``/`` + * `` + * `popover` +* **Advantages** (relative to both other options): + * Requires fewer elements total, since avoiding nested interactive elements comes naturally rather than needing an extra wrapper element. +* **Disadvantages** (relative to both other options): + * Requires naming elements and referencing them by name. + +**DOM Nesting** + +* **Precedents**: + * `
    `/`
      ` + * `