# Page Menu Button Component (Open/Copy)

The *PageMenuButton* component is a component that permits to:

* show or copy an alternate version of your pages such as [Markdown](../reference/ai#markdown-format-for-all-pages)
* open your page in a [AI chatbot](../reference/ai)

## Variants

### Default button

In the default button, clicking on it open a menu of actions.

```jsx
<PageMenuButton render={<Button type="button" variant="outline">Open As / Open In <ChevronDown className="size-4"/></Button>}>
    <CopyAsMarkdownButton>Copy as Markdown</CopyAsMarkdownButton>
    <OpenAsMarkdownAnchor>Open as Markdown</OpenAsMarkdownAnchor>
    <OpenInClaudeAnchor>Open in Claude</OpenInClaudeAnchor>
    <OpenInChatGPTAnchor>Open in ChatGpt</OpenInChatGPTAnchor>
    <OpenInCursorAnchor>Open in Cursor</OpenInCursorAnchor>
    <OpenInSciraAnchor>Open in Scira</OpenInSciraAnchor>
    <OpenInT3Anchor>Open in T3</OpenInT3Anchor>
    <OpenInVoAnchor>Open in Vo</OpenInVoAnchor>
</PageMenuButton>
```

Output:

Open As / Open In

### Split button

In the split button, the left side permits an action while the right side opens the menu.

```jsx
<PageMenuButton variant="split" render={<CopyAsMarkdownButton>Copy As Markdown</CopyAsMarkdownButton>}>
    <OpenAsMarkdownAnchor>Open as Markdown</OpenAsMarkdownAnchor>
    <OpenInClaudeAnchor>Open in Claude</OpenInClaudeAnchor>
    <OpenInChatGPTAnchor>Open in ChatGpt</OpenInChatGPTAnchor>
    <OpenInCursorAnchor>Open in Cursor</OpenInCursorAnchor>
    <OpenInSciraAnchor>Open in Scira</OpenInSciraAnchor>
    <OpenInT3Anchor>Open in T3</OpenInT3Anchor>
    <OpenInVoAnchor>Open in Vo</OpenInVoAnchor>
</PageMenuButton>
```

Output:

Copy As Markdown

## How it works

For each open button variant, you can pass:

* a *render* element to customize the output of the trigger element

* *children* that represents each menu item. Each menu item should be an anchor or a button that have as children:

  <!-- -->

  * a svg icon
  * a span element for the label

An action component to be used as trigger or menu item should accepts the *hideSvg* to delete the icon if *true*.

### Page Button Props

| Prop      | Description                                    |
| --------- | ---------------------------------------------- |
| *render*  | A anchor or button element to render as button |
| *query*   | The query to send to the chatbot               |
| *variant* | The variant (*default* or *split*)             |

## Usage and Distribution

This component is used by default in the [Hero partial](../reference/layout#partials).

You can install it for customization from our [shadcn registry](../reference/registry) with the name *@interact/PageMenuButton*.