Menu Header

import { OdsMenu } from '@ods/components/react.menu';
import { OdsMenuHeader } from '@ods/components/react.menu-header';
import { OdsMenuItem } from '@ods/components/react.menu-item';
import { OdsDivider } from '@ods/components/react.divider';

const Example = () => {
  return (
    <OdsMenu className="w-[220px]">
      <OdsMenuHeader headline="Menu Headline" subline="Menu Subline"></OdsMenuHeader>

      <OdsDivider></OdsDivider>

      <OdsMenuItem value="undo">Undo</OdsMenuItem>
      <OdsMenuItem value="redo">Redo</OdsMenuItem>

      <OdsDivider></OdsDivider>

      <OdsMenuItem value="cut">Cut</OdsMenuItem>
      <OdsMenuItem value="copy">Copy</OdsMenuItem>
      <OdsMenuItem value="paste">Paste</OdsMenuItem>

      <OdsDivider></OdsDivider>

      <OdsMenuItem>
        <span>Find</span>
        <OdsMenu slot="submenu">
          <OdsMenuItem value="find">Find…</OdsMenuItem>
          <OdsMenuItem value="find-previous">Find Next</OdsMenuItem>
          <OdsMenuItem value="find-next">Find Previous</OdsMenuItem>
        </OdsMenu>
      </OdsMenuItem>

      <OdsMenuItem>
        <span>Transformations</span>
        <OdsMenu slot="submenu">
          <OdsMenuItem value="uppercase">Make uppercase</OdsMenuItem>
          <OdsMenuItem value="lowercase">Make lowercase</OdsMenuItem>
          <OdsMenuItem value="capitalize">Capitalize</OdsMenuItem>
        </OdsMenu>
      </OdsMenuItem>
    </OdsMenu>
  )
}

export default Example;