Areia — UI kit for Ilha

Opens a menu at the pointer on right click or touch long press. Use context menus for actions related to a region, item, or surface.

Source Code

Right click here

import ilha from "ilha";
import { ContextMenu } from "areia";

export default ilha.render(() => (
  <ContextMenu
    trigger={
      <div class="rounded-lg border border-dashed border-areia-border p-8 text-center text-areia-subtle">
        Right click here
      </div>
    }
  >
    <ContextMenu.Item value="copy" label="Copy" />
    <ContextMenu.Item value="paste" label="Paste" />
  </ContextMenu>
));

Import

import { ContextMenu } from "areia";

Usage

import ilha from "ilha";
import { ContextMenu } from "areia";

export default ilha.render(() => (
  <ContextMenu>
    <ContextMenu.Trigger>
      <button class="rounded-lg bg-areia-control-background px-3 py-2 ring ring-areia-control-border">
        Right click me
      </button>
    </ContextMenu.Trigger>
    <ContextMenu.Content>
      <ContextMenu.Item value="rename" label="Rename" />
      <ContextMenu.Item value="duplicate" label="Duplicate" />
      <ContextMenu.Item value="delete" label="Delete" />
    </ContextMenu.Content>
  </ContextMenu>
));

Examples

Right click this card

import ilha from "ilha";
import { ContextMenu } from "areia";

export default ilha.render(() => (
  <ContextMenu
    trigger={
      <div class="rounded-lg bg-areia-surface-muted p-6 text-areia-default">
        Right click this card
      </div>
    }
  >
    <ContextMenu.Item value="open" label="Open" />
    <ContextMenu.Item value="copy-link" label="Copy link" />
    <ContextMenu.Item value="archive" label="Archive" />
  </ContextMenu>
));

Checkbox Item

Set closeOnSelect: false when menu items should toggle without closing immediately.

Right click for view options

import ilha from "ilha";
import { ContextMenu } from "areia";

export default ilha.render(() => (
  <ContextMenu
    closeOnSelect={false}
    trigger={
      <div class="rounded-lg border border-areia-border p-6">
        Right click for view options
      </div>
    }
  >
    <ContextMenu.CheckboxItem
      value="show-hidden"
      label="Show hidden files"
    />
    <ContextMenu.CheckboxItem
      value="show-sidebar"
      label="Show sidebar"
      checked
    />
  </ContextMenu>
));

Disabled Item

Right click

import ilha from "ilha";
import { ContextMenu } from "areia";

export default ilha.render(() => (
  <ContextMenu
    trigger={
      <div class="rounded-lg bg-areia-surface-muted p-6">
        Right click
      </div>
    }
  >
    <ContextMenu.Item value="cut" label="Cut" />
    <ContextMenu.Item value="paste" label="Paste" disabled />
  </ContextMenu>
));

Selection Callback

import ilha from "ilha";
import { ContextMenu } from "areia";

export default ilha.render(() => (
  <ContextMenu => console.log("selected", value)}
    trigger={
      <div class="rounded-lg border border-areia-border p-6">
        Right click and select an action
      </div>
    }
  >
    <ContextMenu.Item value="copy" label="Copy" />
    <ContextMenu.Item value="share" label="Share" />
  </ContextMenu>
));

API

`ContextMenu(input)`

Prop	Type	Default	Description
`trigger`	`unknown`	—	Region that opens the menu on right click or long press.
`children`	`unknown`	—	Composed menu slots, or item markup when no `ContextMenu.Content` child is present.
`disabled`	`boolean`	`false`	Disables opening the menu.
`closeOnSelect`	`boolean`	`true`	Whether selecting an item closes the menu.
`onOpenChange`	`(open: boolean) => void`	—	Called when the menu opens or closes.
`onSelect`	`(value: string) => void`	—	Called when an item is selected.
`triggerClassName`	`string`	—	Alias for `triggerClass`.
`contentClassName`	`string`	—	Alias for `contentClass`.

`ContextMenu.Item(input)`

Prop	Type	Description
`value`	`string`	Value emitted when selected.
`label`	`unknown`	Visible item content.
`disabled`	`boolean`	Prevents selection.

Slots

ContextMenu renders these data slots:

context-menu
context-menu-trigger
context-menu-content
context-menu-item
context-menu-checkbox-item
context-menu-radio-item

The controller adds attributes such as data-open, data-closed, data-highlighted, data-checked, and data-state as the menu changes state.

Context Menu