# Dropdown Menu Group

## Usage

A titled group of rows in a compound menu. Renders `role="group"` named by its heading; the heading is plain text, not a `menuitem`, so arrow keys and typeahead skip it. The data-driven equivalent is the `{type: "section", title, items}` entry in `items`; the heading shares its typography and theme target.

```ts
import { DropdownMenuGroup } from '@astryx-vue/core/DropdownMenu'
```

```vue
<script setup lang="ts">
import { DropdownMenu, DropdownMenuGroup, DropdownMenuItem } from '@astryx-vue/core/DropdownMenu'
</script>

<template>
  <DropdownMenu :button="{ label: 'View' }">
    <DropdownMenuGroup title="View">
      <DropdownMenuItem label="Show archived" />
      <DropdownMenuItem label="Compact rows" />
    </DropdownMenuGroup>
  </DropdownMenu>
</template>
```

## DropdownMenuGroup Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string \| number` | — | Heading shown above the group's rows and used as the group's accessible name. Omit it for an unnamed group. |

## Slots

- `default`: the rows of the group — action rows, checkbox rows, radio groups, submenus, and dividers.
- `title`: rich content replacing the `title` prop. The slot content is still the group's accessible name.

## Native attributes

Attributes fall through to the group wrapper, the element carrying `role="group"`, so `class` and `style` reach it. The heading gets a generated id that `aria-labelledby` points at; an unnamed group has no `aria-labelledby`.