# @askrjs/ui/menu

> Published API exports for @askrjs/ui/menu.

Source: [https://askrjs.com/docs/reference/api/ui/menu](https://askrjs.com/docs/reference/api/ui/menu)

Status: stable. Packages: @askrjs/ui/menu.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 26 exports from the declarations shipped by @askrjs/ui.

### `Menu`

```ts
Menu: (props: MenuProps) => JSX.Element
```

Renders a part of `menu`.

### `MENU_A11Y_CONTRACT`

```ts
MENU_A11Y_CONTRACT: { readonly CONTENT_ROLE: "menu"; readonly ITEM_ROLE: "menuitem"; readonly ORIENTATION_ATTRIBUTE: "aria-orientation"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly disabled: "data-disabled"; readonly orientation: "data-orientation"; }; }
```

Menu accessibility contract.

### `MenuA11yContract`

```ts
MenuA11yContract: typeof MENU_A11Y_CONTRACT
```

Type of the Menu A11y Contract object.

### `MenuContent`

```ts
MenuContent: { (props: MenuContentProps): JSX.Element; (props: MenuContentAsChildProps): JSX.Element; }
```

Renders the `menu-content` part of `menu` with `role="menu"`.

Supports polymorphic rendering via `asChild`.

### `MenuContentAsChildProps`

```ts
MenuContentAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Menu Content.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `MenuContentProps`

```ts
MenuContentProps: BoxProps<'div', HTMLDivElement>
```

Props for Menu Content.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `MenuGroup`

```ts
MenuGroup: { (props: MenuGroupProps): JSX.Element; (props: MenuGroupAsChildProps): JSX.Element; }
```

Renders the `menu-group` part of `menu` with `role="group"`.

Supports polymorphic rendering via `asChild`.

### `MenuGroupAsChildProps`

```ts
MenuGroupAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Menu Group.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `MenuGroupProps`

```ts
MenuGroupProps: BoxProps<'div', HTMLDivElement>
```

Props for Menu Group.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `MenuItem`

```ts
MenuItem: { (props: MenuItemProps): JSX.Element | null; (props: MenuItemAsChildProps): JSX.Element | null; }
```

Renders the `menu-item` part of `menu` with `role="menuitem"`.

Supports polymorphic rendering via `asChild`.

### `MenuItemAsChildProps`

```ts
MenuItemAsChildProps: Omit<ButtonLikeAsChildProps, 'onPress'> & MenuItemOwnProps
```

Props for the `asChild` (polymorphic) rendering of Menu Item.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onSelect`: onSelect?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `textValue`: Text used for typeahead when rendered children are not plain text.

- `type`: type?: undefined;

### `MenuItemDescription`

```ts
MenuItemDescription: { (props: MenuItemPartProps): JSX.Element; (props: MenuItemPartAsChildProps): JSX.Element; }
```

Optional supporting description for a structured Menu Item.

### `MenuItemIcon`

```ts
MenuItemIcon: { (props: MenuItemPartProps): JSX.Element; (props: MenuItemPartAsChildProps): JSX.Element; }
```

Optional leading visual for a Menu Item.

### `MenuItemLabel`

```ts
MenuItemLabel: { (props: MenuItemPartProps): JSX.Element; (props: MenuItemPartAsChildProps): JSX.Element; }
```

Primary visible label for a structured Menu Item.

### `MenuItemOwnProps`

```ts
MenuItemOwnProps: {
  children?: unknown;
  disabled?: boolean;
  onSelect?: (event: PressEvent) => void;
  /** Text used for typeahead when rendered children are not plain text. */
  textValue?: string;
}
```

Own props for Menu Item, before merging with native element attributes.

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onSelect`: onSelect?: ((event: PressEvent) => void) | undefined;

- `textValue`: Text used for typeahead when rendered children are not plain text.

### `MenuItemPartAsChildProps`

```ts
MenuItemPartAsChildProps: BoxAsChildProps
```

Props for a polymorphic presentational part within a Menu Item.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `MenuItemPartProps`

```ts
MenuItemPartProps: BoxProps<'span', HTMLSpanElement>
```

Props for a presentational part within a Menu Item.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLSpanElement>;

### `MenuItemProps`

```ts
MenuItemProps: Omit<ButtonLikeProps<'button', HTMLButtonElement>, 'onPress'> & MenuItemOwnProps
```

Props for Menu Item.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onSelect`: onSelect?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `textValue`: Text used for typeahead when rendered children are not plain text.

- `type`: type?: "button" | "submit" | "reset" | undefined;

### `MenuLabel`

```ts
MenuLabel: { (props: MenuLabelProps): JSX.Element | null; (props: MenuLabelAsChildProps): JSX.Element | null; }
```

Renders the `menu-label` part of `menu`.

Supports polymorphic rendering via `asChild`.

### `MenuLabelAsChildProps`

```ts
MenuLabelAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Menu Label.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `MenuLabelProps`

```ts
MenuLabelProps: BoxProps<'div', HTMLDivElement>
```

Props for Menu Label.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `MenuOwnProps`

```ts
MenuOwnProps: {
  /** Supports literal, nested, array-mapped, and `For`-rendered descendants. */
  children?: unknown;
  id?: string;
  orientation?: Orientation;
  loop?: boolean;
}
```

Own props for Menu, before merging with native element attributes.

- `children`: Supports literal, nested, array-mapped, and `For`-rendered descendants.

- `id`: id?: string | undefined;

- `loop`: loop?: boolean | undefined;

- `orientation`: orientation?: Orientation | undefined;

### `MenuProps`

```ts
MenuProps: MenuOwnProps
```

Props for Menu.

- `children`: Supports literal, nested, array-mapped, and `For`-rendered descendants.

- `id`: id?: string | undefined;

- `loop`: loop?: boolean | undefined;

- `orientation`: orientation?: Orientation | undefined;

### `MenuSeparator`

```ts
MenuSeparator: { (props: MenuSeparatorProps): JSX.Element | null; (props: MenuSeparatorAsChildProps): JSX.Element | null; }
```

Renders the `menu-separator` part of `menu` with `role="separator"`.

Supports polymorphic rendering via `asChild`.

### `MenuSeparatorAsChildProps`

```ts
MenuSeparatorAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Menu Separator.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `MenuSeparatorProps`

```ts
MenuSeparatorProps: BoxProps<'div', HTMLDivElement>
```

Props for Menu Separator.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/ui/hover-card/index.md) | [Next](https://askrjs.com/docs/reference/api/ui/menubar/index.md)