Dropdown menu

TS

import { … } from "@fungi.computer/caps/components/dropdown-menu";

Hero

TSX

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@fungi.computer/caps/components/dropdown-menu";

export default function Hero() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>Patch actions</DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>Rename</DropdownMenuItem>
        <DropdownMenuItem>Share location</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Contained

TSX

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@fungi.computer/caps/components/dropdown-menu";
import { useState } from "react";

export default function OpenInline() {
  const [host, setHost] = useState<HTMLDivElement | null>(null);
  return (
    <div className="relative h-32 w-72" ref={setHost}>
      <DropdownMenu modal={false}>
        <DropdownMenuTrigger>Sort by</DropdownMenuTrigger>
        <DropdownMenuContent container={host} align="start">
          <DropdownMenuItem>Freshest first</DropdownMenuItem>
          <DropdownMenuItem>Closest patch</DropdownMenuItem>
          <DropdownMenuItem>Most foraged</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}

Checkbox items

TSX

import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "@fungi.computer/caps/components/dropdown-menu";
import { useState } from "react";

export default function CheckboxItems() {
  const [pinned, setPinned] = useState(true);
  const [notify, setNotify] = useState(false);
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>Patch settings</DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuCheckboxItem checked={pinned} onCheckedChange={setPinned}>
          Pinned
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem checked={notify} onCheckedChange={setNotify}>
          Notify when in season
        </DropdownMenuCheckboxItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Props

DropdownMenuProps

Prop	Type	Description
interactionOwner?	"host" | "local"

• interactionOwner?"host" | "local"

DropdownMenuProps

Prop	Type	Description
Payload	unknown

• Payloadunknown

DropdownMenuItemProps

Prop	Type	Description
onSelect()?	(event) => void	Called when this item is selected.
variant?	"default" | "destructive"

• onSelect()?(event) => void

  Called when this item is selected.

• variant?"default" | "destructive"

Full types: API reference.