# Context menu: Render as another element

> Use `render` to make the trigger any element, such as a figure, or to turn an item into a link.

Example: https://hextaui.com/docs/context-menu/examples/render
Component docs: https://hextaui.com/docs/context-menu.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/context-menu-render.json
```

This adds `components/examples/context-menu/render.tsx` with the Context menu component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/context-menu/render.tsx"
import { IconDownload, IconLink } from "@tabler/icons-react"

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"

export function ContextMenuRender() {
  return (
    <ContextMenu>
      <ContextMenuTrigger
        render={<figure />}
        className="flex w-full max-w-xs flex-col gap-2 rounded-xl border p-3"
      >
        <div className="h-28 rounded-lg bg-muted" />
        <figcaption className="text-sm text-muted-foreground">
          Trigger rendered as a figure
        </figcaption>
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>
          <IconDownload />
          Save image
        </ContextMenuItem>
        <ContextMenuItem render={<a href="#render-as-another-element" />}>
          <IconLink />
          Link item
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}
```

## Props in this example

### ContextMenuTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<div>` |  |

### ContextMenuItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<div>` |  |

## More Context menu examples

- [File list](https://hextaui.com/docs/context-menu/examples/file-list.md)
- [Controlled](https://hextaui.com/docs/context-menu/examples/controlled.md)
- [Disabled](https://hextaui.com/docs/context-menu/examples/disabled.md)
- [Hold feedback](https://hextaui.com/docs/context-menu/examples/hold-feedback.md)
- [Long content](https://hextaui.com/docs/context-menu/examples/long-content.md)
- [Nested submenus](https://hextaui.com/docs/context-menu/examples/nested.md)
- [Inside a sheet](https://hextaui.com/docs/context-menu/examples/in-sheet.md)
- [Right to left](https://hextaui.com/docs/context-menu/examples/rtl.md)