cosmemilton-ui/clientAcoes & navegacao

CmDropdownMenu

Use para acoes secundarias compactas, com trigger render-prop para preservar acessibilidade e posicionamento.

Import

tsx
import { CmDropdownMenu } from "cosmemilton-ui/client";

Menu de acoes

tsx
"use client";

import { CmButton, CmDropdownMenu } from "cosmemilton-ui/client";

export default function Example() {
  return (
    <CmDropdownMenu
      align="end"
      header="Pedido #1048"
      items={[
        { id: "open", label: "Abrir", shortcut: "Enter" },
        { id: "duplicate", label: "Duplicar", shortcut: "D" },
        { type: "separator", id: "sep" },
        { id: "cancel", label: "Cancelar", danger: true },
      ]}
      trigger={({ ref, toggle }) => (
        <CmButton ref={ref} variant="outline" onClick={toggle}>
          Acoes
        </CmButton>
      )}
    />
  );
}

API rapida

CmDropdownMenu

triggeritemsheaderalignclassName