A dropdown menu for additional actions that don't fit in the main action bar.

Anatomy#

import { ActionBarPrimitive, ActionBarMorePrimitive } from "@assistant-ui/react";

const MessageActions = () => (
  <ActionBarPrimitive.Root>
    <ActionBarPrimitive.Copy />
    <ActionBarPrimitive.Reload />

    <ActionBarMorePrimitive.Root>
      <ActionBarMorePrimitive.Trigger>
        <MoreHorizontalIcon />
      </ActionBarMorePrimitive.Trigger>
      <ActionBarMorePrimitive.Content>
        <ActionBarMorePrimitive.Item onSelect={() => console.log("Edit")}>
          Edit
        </ActionBarMorePrimitive.Item>
        <ActionBarMorePrimitive.Item onSelect={() => console.log("Speak")}>
          Read aloud
        </ActionBarMorePrimitive.Item>
        <ActionBarMorePrimitive.Separator />
        <ActionBarMorePrimitive.Item onSelect={() => console.log("Feedback")}>
          Submit feedback
        </ActionBarMorePrimitive.Item>
      </ActionBarMorePrimitive.Content>
    </ActionBarMorePrimitive.Root>
  </ActionBarPrimitive.Root>
);

API Reference#

Root#

Contains all parts of the dropdown menu.

<ParametersTable
type="ActionBarMorePrimitiveRootProps"
parameters={[
{
name: "defaultOpen",
type: "boolean",
default: "false",
description:
"The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state.",
},
{
name: "open",
type: "boolean",
description:
"The controlled open state of the dropdown menu. Must be used in conjunction with onOpenChange.",
},
{
name: "onOpenChange",
type: "(open: boolean) => void",
description:
"Event handler called when the open state of the dropdown menu changes.",
},
{
name: "modal",
type: "boolean",
default: "true",
description:
"The modality of the dropdown menu. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.",
},
{
name: "dir",
type: "'ltr' | 'rtl'",
description: "The reading direction of the dropdown menu.",
},
]}
/>

Trigger#

A button that toggles the dropdown menu.

This primitive renders a <button> element unless asChild is set.

<ParametersTable
type="ActionBarMorePrimitiveTriggerProps"
parameters={[
{
name: "asChild",
},
]}
/>

Content#

The component that pops out when the dropdown menu is open.

This primitive renders a <div> element unless asChild is set.

<ParametersTable
type="ActionBarMorePrimitiveContentProps"
parameters={[
{
name: "asChild",
},
{
name: "side",
type: "'top' | 'right' | 'bottom' | 'left'",
default: "'bottom'",
description: "The preferred side of the trigger to render against.",
},
{
name: "sideOffset",
type: "number",
default: "4",
description: "The distance in pixels from the trigger.",
},
{
name: "align",
type: "'start' | 'center' | 'end'",
default: "'center'",
description: "The preferred alignment against the trigger.",
},
{
name: "alignOffset",
type: "number",
default: "0",
description: "An offset in pixels from the align option.",
},
{
name: "portalProps",
type: "PortalProps",
description: "Props to pass to the Portal component.",
},
]}
/>

Refer to Radix UI's Documentation for DropdownMenu.Content for more details.

Item#

A menu item within the dropdown menu.

This primitive renders a <div> element unless asChild is set.

<ParametersTable
type="ActionBarMorePrimitiveItemProps"
parameters={[
{
name: "asChild",
},
{
name: "disabled",
type: "boolean",
description: "When true, prevents the user from interacting with the item.",
},
{
name: "onSelect",
type: "(event: Event) => void",
description:
"Event handler called when the user selects an item (via mouse or keyboard). Calling event.preventDefault in this handler will prevent the dropdown menu from closing when selecting that item.",
},
{
name: "textValue",
type: "string",
description:
"Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item.",
},
]}
/>

Refer to Radix UI's Documentation for DropdownMenu.Item for more details.

Separator#

A visual separator between groups of items.

This primitive renders a <div> element unless asChild is set.

<ParametersTable
type="ActionBarMorePrimitiveSeparatorProps"
parameters={[
{
name: "asChild",
},
]}
/>

Example Usage#

Basic dropdown menu#

import { ActionBarMorePrimitive } from "@assistant-ui/react";
import { MoreHorizontal, Pencil, Volume2, ThumbsUp } from "lucide-react";

const MoreActionsMenu = () => (
  <ActionBarMorePrimitive.Root>
    <ActionBarMorePrimitive.Trigger className="action-button">
      <MoreHorizontal className="size-4" />
    </ActionBarMorePrimitive.Trigger>
    <ActionBarMorePrimitive.Content className="dropdown-content">
      <ActionBarMorePrimitive.Item
        className="dropdown-item"
        onSelect={() => console.log("Edit")}
        <Pencil className="size-4" />
        Edit message
      </ActionBarMorePrimitive.Item>
      <ActionBarMorePrimitive.Item
        className="dropdown-item"
        onSelect={() => console.log("Speak")}
        <Volume2 className="size-4" />
        Read aloud
      </ActionBarMorePrimitive.Item>
      <ActionBarMorePrimitive.Separator className="dropdown-separator" />
      <ActionBarMorePrimitive.Item
        className="dropdown-item"
        onSelect={() => console.log("Like")}
        <ThumbsUp className="size-4" />
        Good response
      </ActionBarMorePrimitive.Item>
    </ActionBarMorePrimitive.Content>
  </ActionBarMorePrimitive.Root>
);

Using with action hooks#

You can combine the dropdown menu items with action hooks from ActionBarPrimitive:

import {
  ActionBarPrimitive,
  ActionBarMorePrimitive,
  useAui,
  useAuiState,
} from "@assistant-ui/react";
import { useCallback } from "react";

const useEditAction = () => {
  const aui = useAui();
  const disabled = useAuiState((s) => s.composer.isEditing);
  const callback = useCallback(() => aui.composer().beginEdit(), [aui]);
  if (disabled) return null;
  return callback;
};

const useSpeakAction = () => {
  const aui = useAui();
  return useCallback(() => aui.message().speak(), [aui]);
};

const MoreActionsWithHooks = () => {
  const edit = useEditAction();
  const speak = useSpeakAction();

  return (
    <ActionBarMorePrimitive.Root>
      <ActionBarMorePrimitive.Trigger>
        <MoreHorizontalIcon />
      </ActionBarMorePrimitive.Trigger>
      <ActionBarMorePrimitive.Content>
        <ActionBarMorePrimitive.Item onSelect={edit ?? undefined} disabled={!edit}>
          Edit
        </ActionBarMorePrimitive.Item>
        <ActionBarMorePrimitive.Item onSelect={speak}>
          Read aloud
        </ActionBarMorePrimitive.Item>
      </ActionBarMorePrimitive.Content>
    </ActionBarMorePrimitive.Root>
  );
};