# menubarKeys

> Why JS: the WAI-ARIA menubar pattern requires roving tabindex across the row's triggers, `ArrowLeft`/`ArrowRight` and Home/End navigation between them, typeahead, and handing focus straight into whichever Menu a trigger opens, none of which HTML or CSS express on their own.

```ts
import { menubarKeys } from "@sdxc/ui/mixins";
```

Adapts the WAI-ARIA menubar keyboard pattern onto a Menubar's row of
triggers, handing off to each opened Menu's own `menuKeys()` mixin once
focus moves inside it, so each mixin owns keys only within its own scope.

## Signature

```ts
menubarKeys(options?: MenubarKeys.Options): MixinDescriptor<HTMLElement>
```

Returns: A mixin descriptor for the row's `mix` prop.

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `options?` | `MenubarKeys.Options` | Selector overrides for non-standard markup. |

## Examples

```tsx
<Menubar aria-label={t("app.menubar")} mix={menubarKeys()}>
	<Menubar.Trigger commandfor="file-menu">{t("menubar.file")}</Menubar.Trigger>
	<Menu id="file-menu" aria-label={t("menubar.fileMenu")} mix={menuKeys()}>
		<Menu.Item>{t("actions.new")}</Menu.Item>
		<Menu.Item>{t("actions.open")}</Menu.Item>
	</Menu>

	<Menubar.Trigger commandfor="edit-menu">{t("menubar.edit")}</Menubar.Trigger>
	<Menu id="edit-menu" aria-label={t("menubar.editMenu")} mix={menuKeys()}>
		<Menu.Item>{t("actions.undo")}</Menu.Item>
		<Menu.Item>{t("actions.redo")}</Menu.Item>
	</Menu>
</Menubar>
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/mixins` too.

### MenubarKeys.Options

Configuration accepted by menubarKeys.

#### Members

| Member | Type | Description |
| --- | --- | --- |
| `triggerSelector?` | `string` | Selector, evaluated against the row's direct children, that identifies its top-level triggers. Defaults to `[role="menuitem"]`; scoped to direct children so nested Menu rows are never mistaken for triggers. |
| `itemSelector?` | `string` | Selector, evaluated against whichever Menu a trigger opens, that identifies its rows. Defaults to `[role^="menuitem"]`; pass the same value here as the paired `menuKeys()` call's `itemSelector`. |