Skip to content

Menu

The chat menu is a popover anchored to a composer affordance (typically the + soft action). It holds grouped actions, section labels, dividers, an active-item check, and a themed scrollbar. It opens upward from the trigger and is themed through the global --ds-* tokens. Icons are inline SVGs sized by the cmp-chat-menu__icon class.

The popover is absolutely positioned above its trigger, so it is shown open here inside a padded container. cmp-chat-menu is the relative anchor; the cmp-chat-menu__popover holds __groups separated by __dividers, optional __labels, and __item buttons.

<div class="cmp-chat-menu">
  <button
    type="button"
    class="cmp-chat-composer__action cmp-chat-composer__action--soft"
    aria-haspopup="menu"
    aria-expanded="true"
    aria-label="More options"
    title="More options"
  >
    <svg
      class="cmp-chat-composer__icon"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      aria-hidden="true"
    >
      <line x1="12" y1="5" x2="12" y2="19"></line>
      <line x1="5" y1="12" x2="19" y2="12"></line>
    </svg>
  </button>
  <div class="cmp-chat-menu__popover" role="menu">
    <div class="cmp-chat-menu__group">
      <button type="button" class="cmp-chat-menu__item" role="menuitem">
        <svg
          class="cmp-chat-menu__icon"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
        >
          <path
            d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"
          ></path>
        </svg>
        <span>Attach files</span>
      </button>
      <button type="button" class="cmp-chat-menu__item" role="menuitem">
        <svg
          class="cmp-chat-menu__icon"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
        >
          <path
            d="M12 2l2.4 5.1 5.6.6-4.2 3.8 1.2 5.5L12 19.8 6.9 22l1.2-5.5L4 12.7l5.6-.6z"
          ></path>
        </svg>
        <span>Skills</span>
      </button>
    </div>
    <div class="cmp-chat-menu__divider" role="separator"></div>
    <div class="cmp-chat-menu__group">
      <span class="cmp-chat-menu__label">Go to</span>
      <button type="button" class="cmp-chat-menu__item" role="menuitem">
        <span>Course Review</span>
      </button>
      <button type="button" class="cmp-chat-menu__item" role="menuitem">
        <span>Dashboard</span>
      </button>
    </div>
    <div class="cmp-chat-menu__divider" role="separator"></div>
    <div class="cmp-chat-menu__group">
      <span class="cmp-chat-menu__label">Appearance</span>
      <button
        type="button"
        class="cmp-chat-menu__item cmp-chat-menu__item--active"
        role="menuitemradio"
        aria-checked="true"
      >
        <span>System</span>
        <svg
          class="cmp-chat-menu__icon"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2.5"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
        >
          <polyline points="20 6 9 17 4 12"></polyline>
        </svg>
      </button>
      <button
        type="button"
        class="cmp-chat-menu__item"
        role="menuitemradio"
        aria-checked="false"
      >
        <span>Light</span>
      </button>
      <button
        type="button"
        class="cmp-chat-menu__item"
        role="menuitemradio"
        aria-checked="false"
      >
        <span>Dark</span>
      </button>
    </div>
  </div>
</div>

Classes

Class	Element	Purpose
`cmp-chat-menu`	div	Relative anchor wrapping the trigger and popover.
`cmp-chat-menu__popover`	div	Floating panel above the trigger; themed scrollbar.
`cmp-chat-menu__group`	div	A column of related items.
`cmp-chat-menu__divider`	div	Hairline separator between groups.
`cmp-chat-menu__label`	span	Uppercase section label.
`cmp-chat-menu__item`	button	A menu action row.
`cmp-chat-menu__item--active`	button	Active row; floats the trailing check to the right.
`cmp-chat-menu__icon`	svg	Leading or trailing (check) icon.

Accessibility Guidelines

Give the popover role="menu" and each row role="menuitem" (or role="menuitemradio" with aria-checked for single-select groups like theme).
The trigger needs an aria-label; mark decorative <svg> icons aria-hidden="true".
Manage focus and keyboard navigation (arrow keys, Escape to close) in script.

Theming

Uses --ds-surface, --ds-fg, --ds-fg-muted, --ds-border, --ds-hover-bg, --ds-accent, --ds-shadow, and the scrollbar tokens --ds-scrollbar-thumb / --ds-scrollbar-thumb-hover. Under data-theme="dark" the active check switches to the foreground color for better legibility.