# @askrjs/ui/menubar

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

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

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

**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 36 exports from the declarations shipped by @askrjs/ui.

### `Menubar`

```ts
Menubar: (props: MenubarProps) => JSX.Element
```

Renders a part of `menubar`.

### `MENUBAR_A11Y_CONTRACT`

```ts
MENUBAR_A11Y_CONTRACT: { readonly ROOT_ROLE: "menubar"; readonly CONTENT_ROLE: "menu"; readonly ITEM_ROLE: "menuitem"; readonly EXPANDED_ATTRIBUTE: "aria-expanded"; readonly HAS_POPUP_ATTRIBUTE: "aria-haspopup"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; readonly side: "data-side"; readonly align: "data-align"; }; }
```

WAI-ARIA menubar contract.

### `MenubarA11yContract`

```ts
MenubarA11yContract: typeof MENUBAR_A11Y_CONTRACT
```

Type of the Menubar A11y Contract object.

### `MenubarContent`

```ts
MenubarContent: { (props: MenubarContentProps): JSX.Element | null; (props: MenubarContentAsChildProps): JSX.Element | null; }
```

Renders a part of `menubar`.

### `MenubarContentAsChildProps`

```ts
MenubarContentAsChildProps: BoxAsChildProps & MenubarContentOwnProps
```

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

- `align`: align?: OverlayAlign | undefined;

- `asChild`: asChild: true;

- `children`: children: JSXElement;

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

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

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `MenubarContentOwnProps`

```ts
MenubarContentOwnProps: {
  forceMount?: boolean;
  side?: OverlaySide;
  align?: OverlayAlign;
  sideOffset?: number;
}
```

Own props for Menubar Content, before merging with native element attributes.

- `align`: align?: OverlayAlign | undefined;

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

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `MenubarContentProps`

```ts
MenubarContentProps: BoxProps<'div', HTMLDivElement> & MenubarContentOwnProps
```

Props for Menubar Content.

- `align`: align?: OverlayAlign | undefined;

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

- `children`: children?: unknown;

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

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

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `MenubarGroup`

```ts
MenubarGroup: (props: MenubarGroupProps | MenubarGroupAsChildProps) => JSX.Element
```

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

Supports polymorphic rendering via `asChild`.

### `MenubarGroupAsChildProps`

```ts
MenubarGroupAsChildProps: BoxAsChildProps
```

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

- `asChild`: asChild: true;

- `children`: children: JSXElement;

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

### `MenubarGroupProps`

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

Props for Menubar Group.

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

- `children`: children?: unknown;

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

### `MenubarItem`

```ts
MenubarItem: { (props: MenubarItemProps): JSX.Element | null; (props: MenubarItemAsChildProps): JSX.Element | null; }
```

Renders a part of `menubar`.

Supports polymorphic rendering via `asChild`.

### `MenubarItemAsChildProps`

```ts
MenubarItemAsChildProps: ButtonLikeAsChildProps & MenubarTextValueOwnProps
```

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

- `asChild`: asChild: true;

- `children`: children: JSXElement;

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

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

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

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

- `type`: type?: undefined;

### `MenubarItemProps`

```ts
MenubarItemProps: ButtonLikeProps<'button', HTMLButtonElement> & MenubarTextValueOwnProps
```

Props for Menubar Item.

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

- `children`: children?: unknown;

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

- `onPress`: onPress?: ((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;

### `MenubarLabel`

```ts
MenubarLabel: (props: MenubarLabelProps | MenubarLabelAsChildProps) => JSX.Element
```

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

Supports polymorphic rendering via `asChild`.

### `MenubarLabelAsChildProps`

```ts
MenubarLabelAsChildProps: BoxAsChildProps
```

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

- `asChild`: asChild: true;

- `children`: children: JSXElement;

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

### `MenubarLabelProps`

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

Props for Menubar Label.

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

- `children`: children?: unknown;

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

### `MenubarMenu`

```ts
MenubarMenu: (props: MenubarMenuProps) => JSX.Element
```

Renders a part of `menubar`.

### `MenubarMenuProps`

```ts
MenubarMenuProps: {
  children?: unknown;
  /** Stable and unique among sibling menus when menus are rendered dynamically. */
  value?: string;
}
```

Props for Menubar Menu.

- `children`: children?: unknown;

- `value`: Stable and unique among sibling menus when menus are rendered dynamically.

### `MenubarOwnProps`

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

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

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

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

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

### `MenubarPortal`

```ts
MenubarPortal: (props: MenubarPortalProps) => JSX.Element | null
```

Renders a part of `menubar`.

### `MenubarPortalProps`

```ts
MenubarPortalProps: {
  children?: unknown;
}
```

Props for Menubar Portal.

- `children`: children?: unknown;

### `MenubarProps`

```ts
MenubarProps: BoxProps<'div', HTMLDivElement> & MenubarOwnProps
```

Props for Menubar.

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

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

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

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

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

### `MenubarSeparator`

```ts
MenubarSeparator: (props: MenubarSeparatorProps | MenubarSeparatorAsChildProps) => JSX.Element
```

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

Supports polymorphic rendering via `asChild`.

### `MenubarSeparatorAsChildProps`

```ts
MenubarSeparatorAsChildProps: BoxAsChildProps
```

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

- `asChild`: asChild: true;

- `children`: children: JSXElement;

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

### `MenubarSeparatorProps`

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

Props for Menubar Separator.

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

- `children`: children?: unknown;

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

### `MenubarSub`

```ts
MenubarSub: (props: MenubarSubProps) => JSX.Element
```

Renders a part of `menubar`.

### `MenubarSubContent`

```ts
MenubarSubContent: { (props: MenubarSubContentProps): JSX.Element | null; (props: MenubarSubContentAsChildProps): JSX.Element | null; }
```

Renders a part of `menubar`.

### `MenubarSubContentAsChildProps`

```ts
MenubarSubContentAsChildProps: BoxAsChildProps & MenubarContentOwnProps
```

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

- `align`: align?: OverlayAlign | undefined;

- `asChild`: asChild: true;

- `children`: children: JSXElement;

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

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

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `MenubarSubContentProps`

```ts
MenubarSubContentProps: BoxProps<'div', HTMLDivElement> & MenubarContentOwnProps
```

Props for Menubar Sub Content.

- `align`: align?: OverlayAlign | undefined;

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

- `children`: children?: unknown;

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

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

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `MenubarSubProps`

```ts
MenubarSubProps: {
  children?: unknown;
  value?: string;
}
```

Props for Menubar Sub.

- `children`: children?: unknown;

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

### `MenubarSubTrigger`

```ts
MenubarSubTrigger: { (props: MenubarSubTriggerProps): JSX.Element | null; (props: MenubarSubTriggerAsChildProps): JSX.Element | null; }
```

Renders a part of `menubar`.

Supports polymorphic rendering via `asChild`.

### `MenubarSubTriggerAsChildProps`

```ts
MenubarSubTriggerAsChildProps: ButtonLikeAsChildProps & MenubarTextValueOwnProps
```

Props for the `asChild` (polymorphic) rendering of Menubar Sub Trigger.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

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

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

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

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

- `type`: type?: undefined;

### `MenubarSubTriggerProps`

```ts
MenubarSubTriggerProps: ButtonLikeProps<'button', HTMLButtonElement> & MenubarTextValueOwnProps
```

Props for Menubar Sub Trigger.

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

- `children`: children?: unknown;

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

- `onPress`: onPress?: ((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;

### `MenubarTrigger`

```ts
MenubarTrigger: { (props: MenubarTriggerProps): JSX.Element | null; (props: MenubarTriggerAsChildProps): JSX.Element | null; }
```

Renders a part of `menubar`.

Supports polymorphic rendering via `asChild`.

### `MenubarTriggerAsChildProps`

```ts
MenubarTriggerAsChildProps: ButtonLikeAsChildProps & MenubarTextValueOwnProps
```

Props for the `asChild` (polymorphic) rendering of Menubar Trigger.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

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

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

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

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

- `type`: type?: undefined;

### `MenubarTriggerProps`

```ts
MenubarTriggerProps: ButtonLikeProps<'button', HTMLButtonElement> & MenubarTextValueOwnProps
```

Props for Menubar Trigger.

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

- `children`: children?: unknown;

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

- `onPress`: onPress?: ((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;

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/ui/menu/index.md) | [Next](https://askrjs.com/docs/reference/api/ui/popover/index.md)