| Data attribute | Values |
| -------------------- | ------------------------ |
| `[data-disabled]` | Present when disabled |
| `[data-highlighted]` | Present when highlighted |
Refer to Radix UI's Documentation for [DropdownMenu.Item](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#item) for more details.
Separator \[#separator]
A visual separator between groups of items.
This primitive renders a `
` element unless `asChild` is set.
Example Usage \[#example-usage]
Basic dropdown menu \[#basic-dropdown-menu]
```tsx
import { ActionBarMorePrimitive } from "@assistant-ui/react";
import { MoreHorizontal, Pencil, Volume2, ThumbsUp } from "lucide-react";
const MoreActionsMenu = () => (
console.log("Edit")}
>
Edit message
console.log("Speak")}
>
Read aloud
console.log("Like")}
>
Good response
);
```
Using with action hooks \[#using-with-action-hooks]
You can combine the dropdown menu items with action hooks from ActionBarPrimitive:
```tsx
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 (
Edit
Read aloud
);
};
```