<ui-context-menu>
<ui-context-menu-trigger>
<div class="flex h-[150px] max-w-[300px] w-full items-center justify-center rounded-md border border-dashed text-sm">
Right click here
</div>
</ui-context-menu-trigger>
<ui-context-menu-content class="w-64">
<ui-context-menu-item>Back</ui-context-menu-item>
<ui-context-menu-item>Forward</ui-context-menu-item>
<ui-context-menu-item>Reload</ui-context-menu-item>
<ui-context-menu-separator></ui-context-menu-separator>
<ui-context-menu-item>View Page Source</ui-context-menu-item>
<ui-context-menu-item>Inspect</ui-context-menu-item>
</ui-context-menu-content>
</ui-context-menu>
<ui-context-menu> <ui-context-menu-trigger> <ui-context-menu-content> <ui-context-menu-item> <ui-context-menu-checkbox-item> <ui-context-menu-radio-group> <ui-context-menu-radio-item> <ui-context-menu-label> <ui-context-menu-separator> <ui-context-menu-shortcut> <ui-context-menu-group> <ui-context-menu-portal> <ui-context-menu-sub> <ui-context-menu-sub-trigger> <ui-context-menu-sub-content>
<ui-context-menu-item> Custom wrapper| Prop | Type | Default | Description |
|---|---|---|---|
href | string | — | URL to navigate to. Renders as a link when set. (Custom prop) |
All components also accept standard HTML attributes (class, id, style, data-*, aria-*, etc.) which are passed through to the underlying element.