MenuItem 10.16.0

ARIA

RTL

Menu items are used in such vertical menu and containers as Popovers, Sidebars, Drawers, Dialogs etc.

Menu item row heights can vary based on the amount of content in each row. The content in each row is flexible. By default, each menu item row height is Medium(md) 40px for one line of content.

Default

"use client";

import { MenuItem } from "@heathmont/moon-core-tw";

const Default = () => <MenuItem className="w-56">Menu item text</MenuItem>;

export default Default;

MenuItem as an HTML link

Utilize the as prop and the href to manage the menu item as an HTML link.

Menu item text

"use client";

import { MenuItem } from "@heathmont/moon-core-tw";

const AsLink = () => (
  <MenuItem as="a" href="#" className="w-56">
    Menu item text
  </MenuItem>
);

export default AsLink;

MenuItem with an icon

<MenuItem>
  ...
  <IconComponent />
  <MenuItem.Title>...</MenuItem.Title>
  ...
</MenuItem>

"use client";

import { MenuItem } from "@heathmont/moon-core-tw";
import { OtherFrame } from "@heathmont/moon-icons-tw";

const WithIcon = () => (
  <>
    <MenuItem className="w-56">
      <OtherFrame className="text-moon-24" />
      <MenuItem.Title>Your value</MenuItem.Title>
    </MenuItem>
    <MenuItem className="w-56">
      <MenuItem.Title>Your value</MenuItem.Title>
      <OtherFrame className="text-moon-24" />
    </MenuItem>
  </>
);

export default WithIcon;

With meta

"use client";

import { MenuItem } from "@heathmont/moon-core-tw";
import { OtherFrame } from "@heathmont/moon-icons-tw";

const WithMeta = () => (
  <>
    <MenuItem className="w-56">
      <MenuItem.Title>Your value</MenuItem.Title>
      <span className="text-moon-12 text-trunks">Meta</span>
    </MenuItem>
    <MenuItem className="w-56">
      <OtherFrame className="text-moon-24" />
      <MenuItem.Title>Your value</MenuItem.Title>
      <span className="text-moon-12 text-trunks">Meta</span>
    </MenuItem>
  </>
);

export default WithMeta;

MenuItem with Checkbox

<MenuItem>
  ...
  <MenuItem.Title>...</MenuItem.Title>
  <MenuItem.Checkbox />
  ...
</MenuItem>

"use client";

import { useState, useCallback } from "react";
import { MenuItem } from "@heathmont/moon-core-tw";

const Checkbox = () => {
  const [activeOpt1, setActiveOpt1] = useState(false);
  const [activeOpt2, setActiveOpt2] = useState(false);
  const toggle1 = useCallback(() => setActiveOpt1(!activeOpt1), [activeOpt1]);
  const toggle2 = useCallback(() => setActiveOpt2(!activeOpt2), [activeOpt2]);

  return (
    <>
      <MenuItem isSelected={activeOpt1} onClick={toggle1} className="w-56">
        <MenuItem.Checkbox />
        <MenuItem.Title>Your value</MenuItem.Title>
      </MenuItem>
      <MenuItem isSelected={activeOpt2} onClick={toggle2} className="w-56">
        <MenuItem.Title>Your value</MenuItem.Title>
        <MenuItem.Checkbox className="rounded-none shadow-roshi moon-checked:bg-roshi" />
      </MenuItem>
    </>
  );
};

export default Checkbox;

MenuItem with an Radio input

<MenuItem>
  ...
  <MenuItem.Title>...</MenuItem.Title>
  <MenuItem.Radio ... />
  ...
</MenuItem>

"use client";

import { useState, useCallback } from "react";
import { MenuItem } from "@heathmont/moon-core-tw";

const Radio = () => {
  const [activeOpt1, setActiveOpt1] = useState(false);
  const [activeOpt2, setActiveOpt2] = useState(false);
  return (
    <>
      <MenuItem
        isSelected={activeOpt1}
        onClick={useCallback(() => setActiveOpt1(!activeOpt1), [activeOpt1])}
        className="w-56"
      >
        <MenuItem.Radio />
        <MenuItem.Title>Your value</MenuItem.Title>
      </MenuItem>
      <MenuItem
        isSelected={activeOpt2}
        onClick={useCallback(() => setActiveOpt2(!activeOpt2), [activeOpt2])}
        className="w-56"
      >
        <MenuItem.Title>Your value</MenuItem.Title>
        <MenuItem.Radio className="moon-checked:shadow-hit after:bg-hit" />
      </MenuItem>
    </>
  );
};

export default Radio;

MenuItem with a multi-line title.

<MenuItem>
  ...
  <MenuItem.MultiTitle ... />
  ...
</MenuItem>

"use client";

import { useState, useCallback } from "react";
import { MenuItem } from "@heathmont/moon-core-tw";
import { OtherFrame } from "@heathmont/moon-icons-tw";

const MultiTitle = () => {
  const [active, setActive] = useState(false);
  return (
    <>
      <MenuItem className="w-56" data-testid="menu-item-1">
        <span>
          <OtherFrame className="text-moon-24" />
        </span>
        <MenuItem.MultiTitle
          title="Your value"
          text={
            <span>
              Lorem Ipsum is simply dummy text of the printing and typesetting
              industry
            </span>
          }
        />
        <span className="text-moon-12 text-trunks">Meta</span>
      </MenuItem>
      <MenuItem
        isSelected={active}
        onClick={useCallback(() => setActive(!active), [active])}
        className="w-56"
        data-testid="menu-item-2"
      >
        <span className="px-2">
          <OtherFrame className="text-moon-24" />
        </span>
        <MenuItem.MultiTitle
          title="Your value"
          text={
            <span>
              Lorem Ipsum is simply dummy text of the printing and typesetting
              industry
            </span>
          }
        />
        <span className="px-2">
          <MenuItem.Checkbox />
        </span>
      </MenuItem>
    </>
  );
};

export default MultiTitle;

Example with multiple multi-line items

"use client";

import { MenuItem } from "@heathmont/moon-core-tw";
import { OtherFrame } from "@heathmont/moon-icons-tw";

const MultiLineItems = () => {
  return (
    <div className="w-94 bg-gohan flex flex-col gap-3 rounded-moon-s-lg p-6">
      <MenuItem isActive>
        <span className="bg-piccolo/10 rounded-moon-i-sm w-10 h-10 flex justify-center items-center">
          <OtherFrame className="text-moon-24 text-piccolo" />
        </span>
        <MenuItem.MultiTitle
          title="Job Board"
          text={<span>find your dream design job</span>}
        />
      </MenuItem>
      <MenuItem>
        <span className="bg-piccolo/10 rounded-moon-i-sm w-10 h-10 flex justify-center items-center">
          <OtherFrame className="text-moon-24 text-piccolo" />
        </span>
        <MenuItem.MultiTitle
          title="Freelance Projects"
          text={<span>An exclusive list for contract work</span>}
        />
      </MenuItem>
      <hr className="border-top border-beerus" />
      <MenuItem>
        <span className="bg-krillin-10 rounded-moon-i-sm w-10 h-10 flex justify-center items-center">
          <OtherFrame className="text-moon-24 text-krillin" />
        </span>
        <MenuItem.MultiTitle
          title="Want freelance design projects?"
          text={<span>Get new leads in your inbox every day</span>}
        />
      </MenuItem>
      <MenuItem>
        <span className="bg-chichi-10 rounded-moon-i-sm w-10 h-10 flex justify-center items-center">
          <OtherFrame className="text-moon-24 text-chichi" />
        </span>
        <MenuItem.MultiTitle
          title="Personalized your profile with video"
          text={<span>Introduce yourself to new clients with Pitch</span>}
        />
      </MenuItem>
    </div>
  );
};

export default MultiLineItems;

Expand or collapse

Vision Getting started How to contribute?Colors palette Tokens Transform SVG Manifest

Accordion Avatar Breadcrumb Button Checkbox

"use client";

import { MenuItem } from "@heathmont/moon-core-tw";
import { ControlsChevronDown } from "@heathmont/moon-icons-tw";
import { useCallback, useState } from "react";

const ExpandCollapse = () => {
  const [activeOpt, setActiveOpt] = useState(true);
  const [isOpen, setIsOpen] = useState(true);

  const toggleClick = useCallback(() => {
    setIsOpen(!isOpen);
  }, [isOpen]);

  const toggleOpt = useCallback(() => {
    setActiveOpt(!activeOpt);
  }, [activeOpt]);

  return (
    <div className="flex items-start flex-wrap justify-around gap-2 w-full">
      <div className="w-56 bg-gohan flex flex-col gap-2 rounded-moon-s-lg p-4">
        <MenuItem as="a" href="/">
          Vision
        </MenuItem>
        <MenuItem as="a" href="/">
          Getting started
        </MenuItem>
        <MenuItem as="a" href="/">
          How to contribute?
        </MenuItem>
        <MenuItem as="a" href="/">
          Colors palette
        </MenuItem>
        <MenuItem as="a" href="/">
          Tokens
        </MenuItem>
        <MenuItem as="a" href="/">
          Transform SVG
        </MenuItem>
        <MenuItem as="a" href="/">
          Manifest
        </MenuItem>
        <MenuItem isActive={activeOpt} onClick={toggleOpt}>
          Tailwind
          <ControlsChevronDown className={`w-6 ${activeOpt && "rotate-180"}`} />
        </MenuItem>

        {activeOpt && (
          <div className="ps-6" data-testid="expandable-1">
            <MenuItem as="a" href="/">
              <MenuItem.Title> Accordion</MenuItem.Title>
            </MenuItem>
            <MenuItem as="a" href="/">
              <MenuItem.Title> Avatar</MenuItem.Title>
            </MenuItem>
            <MenuItem as="a" href="/">
              <MenuItem.Title> Breadcrumb</MenuItem.Title>
            </MenuItem>
            <MenuItem as="a" href="/">
              <MenuItem.Title> Button</MenuItem.Title>
            </MenuItem>
            <MenuItem as="a" href="/">
              <MenuItem.Title> Checkbox</MenuItem.Title>
            </MenuItem>
          </div>
        )}
      </div>

      <div className="w-56 bg-gohan flex flex-col gap-2 rounded-moon-s-lg p-4">
        <MenuItem>
          <span className="bg-goku w-6 h-6 rounded-full flex justify-center items-center">
            <p className="font-medium text-moon-10">B</p>
          </span>
          <MenuItem.Title>
            <p className="text-moon-14 font-medium">Bitcasino</p>
          </MenuItem.Title>
        </MenuItem>
        <MenuItem
          className="ps-6"
          onClick={toggleClick}
          data-testid="right-trigger"
        >
          <span className="bg-goku w-6 h-6 rounded-full flex justify-center items-center">
            <p className="font-medium text-moon-10">CX</p>
          </span>
          <MenuItem.Title> Customer...</MenuItem.Title>
          <ControlsChevronDown className={`w-6 ${isOpen && "rotate-180"}`} />
        </MenuItem>

        {isOpen && (
          <div className="ps-10" data-testid="expandable-2">
            <MenuItem>
              <span className="bg-goku w-6 h-6 rounded-full flex justify-center items-center">
                <p className="font-medium text-moon-10">S</p>
              </span>
              <MenuItem.Title>Sub nested item</MenuItem.Title>
            </MenuItem>
            <MenuItem>
              <span className="bg-goku w-6 h-6 rounded-full flex justify-center items-center">
                <p className="font-medium text-moon-10">S</p>
              </span>
              <MenuItem.Title>Sub nested item</MenuItem.Title>
            </MenuItem>
          </div>
        )}

        <MenuItem className="ps-6">
          <span className="bg-goku w-6 h-6 rounded-full flex justify-center items-center">
            <p className="font-medium text-moon-10">CX</p>
          </span>
          <MenuItem.Title>Quality...</MenuItem.Title>
        </MenuItem>
        <MenuItem className="ps-6">
          <span className="bg-goku w-6 h-6 rounded-full flex justify-center items-center">
            <p className="font-medium text-moon-10">RG</p>
          </span>
          <MenuItem.Title>Responsible...</MenuItem.Title>
        </MenuItem>
        <MenuItem className="ps-6">
          <span className="bg-goku w-6 h-6 rounded-full flex justify-center items-center">
            <p className="font-medium text-moon-10">RG</p>
          </span>
          <MenuItem.Title>Responsible...</MenuItem.Title>
        </MenuItem>
        <div className="flex flex-col gap-2 rounded-moon-s-lg">
          <MenuItem>
            <span className="bg-goku w-6 h-6 rounded-full flex justify-center items-center">
              <p className="font-medium text-moon-10">S</p>
            </span>
            <MenuItem.Title>
              <p className="text-moon-14 font-medium">Sportsbet</p>
            </MenuItem.Title>
          </MenuItem>
          <MenuItem className="ps-6">
            <span className="bg-goku w-6 h-6 rounded-full flex justify-center items-center">
              <p className="font-medium text-moon-10">RG</p>
            </span>
            <MenuItem.Title>Customer...</MenuItem.Title>
          </MenuItem>
          <MenuItem className="ps-6">
            <span className="bg-goku w-6 h-6 rounded-full flex justify-center items-center">
              <p className="font-medium text-moon-10">CX</p>
            </span>
            <MenuItem.Title>Quality...</MenuItem.Title>
          </MenuItem>
          <MenuItem className="ps-6">
            <span className="bg-goku w-6 h-6 rounded-full flex justify-center items-center">
              <p className="font-medium text-moon-10">RG</p>
            </span>
            <MenuItem.Title>Responsible...</MenuItem.Title>
          </MenuItem>
        </div>
        <div className="flex flex-col gap-2 rounded-moon-s-lg ">
          <MenuItem>
            <span className="bg-goku w-6 h-6 rounded-full flex justify-center items-center">
              <p className="font-medium text-moon-10">L</p>
            </span>
            <MenuItem.Title>
              <p className="text-moon-14 font-medium">Livecasino</p>
            </MenuItem.Title>
          </MenuItem>
          <MenuItem className="ps-6">
            <span className="bg-goku w-6 h-6 rounded-full flex justify-center items-center">
              <p className="font-medium text-moon-10">RG</p>
            </span>
            <MenuItem.Title>Customer...</MenuItem.Title>
          </MenuItem>
        </div>
      </div>
    </div>
  );
};

export default ExpandCollapse;

MenuItem

These are props specific to the MenuItem component:

Name	Type	Default
as	"a" \| "button"	button
isActive	boolean	-
isSelected	boolean	-
className*	string	-

Properties indicated with * are required.