GrDropdownMenu

The panel of GrDropdown declares role="menu", and that role makes all of its descendants presentational. The roles here are therefore not an ornament but the condition on which the menu exists for a screen reader at all:

• an item is role="menuitem" (or menuitemcheckbox/menuitemradio);
• a separator is role="separator";
• a group is role="group" with a name from its heading through aria-labelledby;
• the heading of a group is role="presentation";
• the list, the columns and a column are role="none": a wrapper between menu and menuitem breaks aria-required-children.

The items are not tabbable (tabindex="-1"): in the menu pattern it is the trigger that stays tabbable, and inside the panel the focus is walked by the arrows — that is disposed of by GrDropdown. Otherwise Tab would walk the items and the menu would be a mere list of buttons.

disabled is dimmed with aria-disabled rather than with the native disabled: the item stays focusable and enters the walk with the arrows, so the user learns that the action exists but is currently unavailable (a recommendation of the WAI-ARIA APG). The click and Enter are intercepted in the process, and the background and the text come from the disabled tokens rather than from opacity.

href makes an item a link by itself — as="a" is not needed for that. target and rel are set explicitly, and external is a shortcut for target="_blank" with rel="noopener noreferrer".

On a disabled link the href is removed: intercepting the click does not save you from the middle mouse button and from “open in a new tab” in the browser’s context menu. The same device is used in GrButton.

In the declarative model those are the href, target, rel and external fields of an item.

role="menuitemcheckbox" and role="menuitemradio" require aria-checked — the component sets it in both states, otherwise AT reads the item as an ordinary command. The room for the mark is always taken when the item is toggleable: otherwise the “on” and “off” rows shift horizontally against each other.

<GrDropdownMenuItem role="menuitemcheckbox" :checked="showArchived" @click="toggle">
  Show the archive
</GrDropdownMenuItem>

The icon and the keyboard shortcut are set with the icon / shortcut props or with the #icon / #shortcut slots (a slot is stronger).

Composition remains for non-standard items: GrDropdownMenuList is the wrapper of the list, GrDropdownMenuGroup and GrDropdownMenuHeader are a section with a heading, GrDropdownMenuItem and GrDropdownMenuDivider are an item and a separator, and GrDropdownMenuColumns with GrDropdownMenuColumn are the layout into columns. All of them arrive from the same subpath as the menu.

But nine menus out of ten are of the same kind — it is simpler to describe them with an array:

<GrDropdownMenu :items="items" @select="onSelect" />

const items: GrDropdownMenuEntry[] = [
  { key: 'rename', label: 'Rename', shortcut: '⌘R' },
  { type: 'divider' },
  { type: 'group', title: 'View', items: [
    { key: 'compact', label: 'Compact', role: 'menuitemradio', checked: true },
  ] },
  { key: 'delete', label: 'Delete', variant: 'danger' },
]

select is not emitted for a disabled item. An item with href renders as a link. The default slot is stronger than the model: if both have been passed, the slot wins.

The model can do what composition can. An item accepts as — a tag or a router component — and align; a group knows titleAlign, dividers and uppercase. This is not a convenience: without as a link item from the model stays an ordinary <a>, that is, in an SPA the transition goes through a page reload, and there is no way around it — the model can be unfolded into props only inside the component. It was enough for that field to fall behind GrDropdownMenuItem for the consumer to have to rewrite the whole walk over the model for the sake of a single link.

const items: GrDropdownMenuEntry[] = [
  { key: 'profile', label: 'Profile', href: '/profile', as: RouterLink },
]

An item with non-empty children becomes an opener: it performs nothing and no select arrives for it — it opens the panel of the next level. In composition the same is given by GrDropdownMenuSub.

const items: GrDropdownMenuEntry[] = [
  { key: 'rename', label: 'Rename' },
  { key: 'export', label: 'Export', children: [
    { key: 'pdf', label: 'PDF' },
    { key: 'csv', label: 'CSV' },
  ] },
]

<GrDropdownMenuSub label="Export">
  <GrDropdownMenuItem @click="save('pdf')">PDF</GrDropdownMenuItem>
</GrDropdownMenuSub>

The depth is not limited, and children accepts the same entries as the root: inside a submenu separators, groups and the next level all make sense.

The levels are layers of their own, not nested markup. Every panel goes into a portal, so in the DOM they lie side by side rather than one inside another. Everything else follows from that: Escape closes the top level rather than the whole menu; a selection in a submenu closes the whole chain; a click on an opener does not reach the parent panel, otherwise closeOnContentClick would close the menu at the very moment the next level opened.

The cursor is given a corridor. The path from an item to its submenu runs diagonally and passes over the neighbouring items. While the cursor is inside the triangle “point of departure → the near edge of the opened panel”, leaving counts as movement towards the target: the panel does not close, and the neighbours do not open their submenus — they will open one as soon as it becomes clear that the cursor was not heading for the panel. Without that a submenu is lost halfway.

The keyboard — ../keyboard.md: → opens, ← returns to the opener, Tab closes the menu as a whole.

href and the toggle roles are incompatible with children: an item cannot be a link and an opener at once — in the dev build that is a warning.

variant="danger" colours an item with the --gr-danger-text role rather than with a saturated tone: a saturated tone as a text colour does not pass contrast. Disabled is dimmed with a background (--gr-muted) rather than with opacity, and lets through neither a click nor a keyboard activation — a handler on the item itself is stopped with stopImmediatePropagation.

An item is rounded and fitted into the padding of the panel. The background of the highlight lies on the item itself, and the panel of GrDropdown is rounded and does not clip its content: a rectangle across the full width would fill the corner segments cut out by its radius. The item therefore has a radius of its own, one step smaller than that of the panel — the same device as in the options of GrSelect and GrAutocomplete.

Suppressing the padding of the panel with your own p-0 is not allowed for that: both classes land in the same attribute with equal specificity, and the winner is chosen by the order of the rules in the generated CSS rather than by the markup. If a panel without padding is needed, that is a separate channel, not an override with a class.

The borderTop / borderBottom lines do not reach the edges — and that is not an oversight. The list lies inside the padding of the panel: 1 px of border plus 4 px of p-1. The corner of the panel is rounded by 16 px, that is, at a depth of 5 px the arc is still running — a rule across the full width would run not into the vertical edge but into it, and at every corner a wedge where the line and the border converge would be visible. The line is therefore drawn with a pseudo-element inset by 8 px, the same as in GrDropdownMenuDivider :inset. The items stay full width in the process: their width is part of the same fitting of the highlight into the padding of the panel.

The rule is general for rounded surfaces: nothing full width comes closer to the edge of a panel than its radius. The geometry is held by an e2e check (apps/showcase/e2e/geometry.spec.ts) — in jsdom utilities do not turn into CSS, and there is no seeing where the end of a line landed.

None of this concerns the separators between items: dividers and GrDropdownMenuDivider lie far from the corners and read fine across the full width.

All of the classes of the catalogue live in grDropdownMenuStyles.ts and are declared in the safelist: a .ts helper is moved by the bundler into a shared chunk, outside the scan area of the component, and without the safelist an isolated consumer would lose the alignment, the columns and the colours.

The open prop and the update:open event are passed into the wrapped GrDropdown as they are — the contract is the same as in GrDropdown.