# Actions

Share action menus and a scroll-to-top control.

- Group: Website
- Import: `import { ActionMenu } from '@misoto22/folio/website'`
- Page: https://ui.misoto22.com/components/actions/

## When to reach for it

Connect generic accessible controls to host-owned share and scroll intentions.

## Best practices

### Do

- Supply localized labels, descriptive links and meaningful image alternatives.

### Don’t

- Do not put service credentials, routing logic or backend models inside presentation components.

## ActionMenu

A collision-aware action menu with roving focus and an optional native trigger.

### Props

- `label` (required) — `string`.
- `icon` (required) — `ReactNode`.
- `items` (required) — `ActionMenuItem[]`.
- `open` (required) — `boolean`.
- `onOpenChange` (required) — `(open: boolean) => void`.
- `side` — `'top' | 'bottom'` default `'bottom'`.
- `align` — `'start' | 'center' | 'end'` default `'center'`.
- `onTriggerAction` — `() => void`. A host-native action may replace the menu on a supported device.
- `className` — `string`.

## ScrollControl

Page position belongs to the host; visibility and a safe tab stop belong here.

### Props

- `label` (required) — `string`.
- `visible` (required) — `boolean`.
- `onActivate` (required) — `() => void`.

## Example — a record action menu

```tsx
import { Text } from '@misoto22/folio'
import { ActionMenu } from '@misoto22/folio/website'

<div className="flex items-center gap-4">
  <Text role="status">{read ? 'Read' : 'Unread'}</Text>
  <ActionMenu label="Record actions" icon={<RiMoreLine size={18} aria-hidden="true" />}
    open={open} onOpenChange={setOpen} items={[
      { id: 'read', label: 'Mark as read', onSelect: () => setRead(true) },
      { id: 'unread', label: 'Mark as unread', onSelect: () => setRead(false) },
    ]} />
</div>
```