# ThreadListItemMorePrimitive
URL: /docs/api-reference/primitives/thread-list-item-more

Dropdown menu for additional thread actions like archive and delete.

A dropdown menu for displaying additional actions on a thread list item. Built on top of [Radix UI Dropdown Menu](https://www.radix-ui.com/primitives/docs/components/dropdown-menu).

Anatomy \[#anatomy]

```tsx
import {
  ThreadListItemPrimitive,
  ThreadListItemMorePrimitive
} from "@assistant-ui/react";

const ThreadListItemMore = () => (
  <ThreadListItemMorePrimitive.Root>
    <ThreadListItemMorePrimitive.Trigger>
      More options
    </ThreadListItemMorePrimitive.Trigger>
    <ThreadListItemMorePrimitive.Content>
      <ThreadListItemPrimitive.Archive asChild>
        <ThreadListItemMorePrimitive.Item>
          Archive
        </ThreadListItemMorePrimitive.Item>
      </ThreadListItemPrimitive.Archive>
      <ThreadListItemMorePrimitive.Separator />
      <ThreadListItemPrimitive.Delete asChild>
        <ThreadListItemMorePrimitive.Item>
          Delete
        </ThreadListItemMorePrimitive.Item>
      </ThreadListItemPrimitive.Delete>
    </ThreadListItemMorePrimitive.Content>
  </ThreadListItemMorePrimitive.Root>
);
```

API Reference \[#api-reference]

Root \[#root]

Contains all parts of the dropdown menu. Wraps Radix UI's `DropdownMenu.Root`.

<ParametersTable
  type="ThreadListItemMorePrimitiveRootProps"
  parameters="[
{
name: &#x22;open&#x22;,
type: &#x22;boolean&#x22;,
description: &#x22;The controlled open state of the dropdown menu.&#x22;,
},
{
name: &#x22;defaultOpen&#x22;,
type: &#x22;boolean&#x22;,
description: &#x22;The open state of the dropdown menu when it is initially rendered.&#x22;,
},
{
name: &#x22;onOpenChange&#x22;,
type: &#x22;(open: boolean) => void&#x22;,
description: &#x22;Event handler called when the open state changes.&#x22;,
},
{
name: &#x22;modal&#x22;,
type: &#x22;boolean&#x22;,
default: &#x22;true&#x22;,
description: &#x22;Whether the dropdown menu should be modal.&#x22;,
},
]"
/>

Trigger \[#trigger]

The button that toggles the dropdown menu. Wraps Radix UI's `DropdownMenu.Trigger`.

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

<ParametersTable
  type="ThreadListItemMorePrimitiveTriggerProps"
  parameters="[
{
name: &#x22;asChild&#x22;,
},
]"
/>

Content \[#content]

The container for the dropdown menu items. Wraps Radix UI's `DropdownMenu.Portal` and `DropdownMenu.Content`.

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

Item \[#item]

A menu item within the dropdown. Wraps Radix UI's `DropdownMenu.Item`.

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

<ParametersTable
  type="ThreadListItemMorePrimitiveItemProps"
  parameters="[
{
name: &#x22;asChild&#x22;,
},
{
name: &#x22;disabled&#x22;,
type: &#x22;boolean&#x22;,
description: &#x22;Whether the item is disabled.&#x22;,
},
{
name: &#x22;onSelect&#x22;,
type: &#x22;(event: Event) => void&#x22;,
description: &#x22;Event handler called when the user selects an item.&#x22;,
},
]"
/>

Separator \[#separator]

A visual separator between menu items. Wraps Radix UI's `DropdownMenu.Separator`.

<ParametersTable
  type="ThreadListItemMorePrimitiveSeparatorProps"
  parameters="[
{
name: &#x22;asChild&#x22;,
},
]"
/>

Examples \[#examples]

With Icons \[#with-icons]

```tsx
import { ArchiveIcon, TrashIcon, MoreHorizontalIcon } from "lucide-react";

const ThreadListItemMore = () => (
  <ThreadListItemMorePrimitive.Root>
    <ThreadListItemMorePrimitive.Trigger asChild>
      <button className="icon-button">
        <MoreHorizontalIcon />
      </button>
    </ThreadListItemMorePrimitive.Trigger>
    <ThreadListItemMorePrimitive.Content
      side="bottom"
      align="start"
      className="dropdown-content"
    >
      <ThreadListItemPrimitive.Archive asChild>
        <ThreadListItemMorePrimitive.Item className="dropdown-item">
          <ArchiveIcon className="icon" />
          Archive
        </ThreadListItemMorePrimitive.Item>
      </ThreadListItemPrimitive.Archive>
    </ThreadListItemMorePrimitive.Content>
  </ThreadListItemMorePrimitive.Root>
);
```

Complete Thread List Item with More Menu \[#complete-thread-list-item-with-more-menu]

```tsx
const ThreadListItem = () => (
  <ThreadListItemPrimitive.Root className="thread-item">
    <ThreadListItemPrimitive.Trigger className="thread-trigger">
      <ThreadListItemPrimitive.Title fallback="New Chat" />
    </ThreadListItemPrimitive.Trigger>

    <ThreadListItemMorePrimitive.Root>
      <ThreadListItemMorePrimitive.Trigger asChild>
        <button className="more-button">
          <MoreHorizontalIcon />
        </button>
      </ThreadListItemMorePrimitive.Trigger>
      <ThreadListItemMorePrimitive.Content>
        <ThreadListItemPrimitive.Archive asChild>
          <ThreadListItemMorePrimitive.Item>
            <ArchiveIcon />
            Archive
          </ThreadListItemMorePrimitive.Item>
        </ThreadListItemPrimitive.Archive>
      </ThreadListItemMorePrimitive.Content>
    </ThreadListItemMorePrimitive.Root>
  </ThreadListItemPrimitive.Root>
);
```