Tail Kit

Component to render dropdown menu

Use Menu.Item and Menu.Divider components to render the drop down content

If verticalPlacement or horizontalPlacement is not provided, it would be computed based on the position of trigger and menu content.

Usage

The Menu component can be imported using

import { Menu } from '@tail-kit/tail-kit'

function DropdownMenu() {
  const menuContent = (
    <>
      <Menu.Item label="Share Blog" icon={<HiOutlineShare />} />
      <Menu.Item label="Edit Blog" icon={<HiOutlinePencilAlt />} />
      <Menu.Divider />
      <Menu.Item
        className="text-red-500"
        label="Delete Blog"
        icon={<HiOutlineTrash />}
      />
    </>
  )
  return (
    <div className="relative w-full h-80 all-menus-container">
      <div className="absolute top-0 left-0">
        <Menu trigger={<Button icon={<HiOutlineChevronDown />} />}>
          {menuContent}
        </Menu>
      </div>
      <div className="absolute bottom-0 left-0">
        <Menu trigger={<Button icon={<HiOutlineChevronUp />} />}>
          {menuContent}
        </Menu>
      </div>
      <div className="absolute top-0 right-0">
        <Menu trigger={<Button icon={<HiOutlineChevronDown />} />}>
          {menuContent}
        </Menu>
      </div>
      <div className="absolute bottom-0 right-0">
        <Menu trigger={<Button icon={<HiOutlineChevronUp />} />}>
          {menuContent}
        </Menu>
      </div>
    </div>
  )
}

function DropdownMenu() {
  const menuContent = (
    <>
      <Menu.Item label="Share Blog" icon={<HiOutlineShare />} />
      <Menu.Item label="Edit Blog" icon={<HiOutlinePencilAlt />} />
      <Menu.Divider />
      <Menu.Item
        className="text-red-500"
        label="Delete Blog"
        icon={<HiOutlineTrash />}
      />
    </>
  )
  return (
    <div className="relative w-full h-80 all-menus-container">
      <div className="absolute top-0 left-0">
        <Menu trigger={<Button icon={<HiOutlineChevronDown />} />}>
          {menuContent}
        </Menu>
      </div>
      <div className="absolute bottom-0 left-0">
        <Menu trigger={<Button icon={<HiOutlineChevronUp />} />}>
          {menuContent}
        </Menu>
      </div>
      <div className="absolute top-0 right-0">
        <Menu trigger={<Button icon={<HiOutlineChevronDown />} />}>
          {menuContent}
        </Menu>
      </div>
      <div className="absolute bottom-0 right-0">
        <Menu trigger={<Button icon={<HiOutlineChevronUp />} />}>
          {menuContent}
        </Menu>
      </div>
    </div>
  )
}

function MenuWithinAModal() {
  const [modalVisible, setModalVisible] = React.useState(false)
  return (
    <>
      <Button onClick={() => setModalVisible(true)}>Click To Open Modal</Button>
      <Modal
        title="Menu Within Modal"
        visible={modalVisible}
        onRequestClose={() => setModalVisible(false)}
        dividers
      >
        <div className="mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi gravida
          lorem nec velit egestas, quis varius mi condimentum. Nulla risus
          velit, imperdiet at pharetra a, eleifend eget massa. Donec porta purus
          eu ex hendrerit sagittis. Vestibulum eget mattis tellus, a dapibus
          nisi.
        </div>
        <Menu
          trigger={<Button icon={<HiOutlineChevronDown />}>Show Menu</Button>}
        >
          <Menu.Item label="Share Blog" icon={<HiOutlineShare />} />
          <Menu.Item label="Edit Blog" icon={<HiOutlinePencilAlt />} />
          <Menu.Divider />
          <Menu.Item
            className="text-red-500"
            label="Delete Blog"
            icon={<HiOutlineTrash />}
          />
        </Menu>
      </Modal>
    </>
  )
}

function MenuWithinAModal() {
  const [modalVisible, setModalVisible] = React.useState(false)
  return (
    <>
      <Button onClick={() => setModalVisible(true)}>Click To Open Modal</Button>
      <Modal
        title="Menu Within Modal"
        visible={modalVisible}
        onRequestClose={() => setModalVisible(false)}
        dividers
      >
        <div className="mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi gravida
          lorem nec velit egestas, quis varius mi condimentum. Nulla risus
          velit, imperdiet at pharetra a, eleifend eget massa. Donec porta purus
          eu ex hendrerit sagittis. Vestibulum eget mattis tellus, a dapibus
          nisi.
        </div>
        <Menu
          trigger={<Button icon={<HiOutlineChevronDown />}>Show Menu</Button>}
        >
          <Menu.Item label="Share Blog" icon={<HiOutlineShare />} />
          <Menu.Item label="Edit Blog" icon={<HiOutlinePencilAlt />} />
          <Menu.Divider />
          <Menu.Item
            className="text-red-500"
            label="Delete Blog"
            icon={<HiOutlineTrash />}
          />
        </Menu>
      </Modal>
    </>
  )
}

<div className="flex items-center justify-center h-80">
  <Menu
    trigger={<Button icon={<HiOutlineDotsVertical />} buttonType="link" />}
    horizontalPlacement="right"
    verticalPlacement="top"
  >
    <Menu.Item label="Profile" icon={<HiOutlineUserCircle />} />

    <Menu.Item label="Settings" icon={<HiOutlineCog />} />

    <Menu.Divider />

    <Menu.Item label="Logout" icon={<HiOutlineLogout />} />
  </Menu>
</div>

<div className="flex items-center justify-center h-80">
  <Menu
    trigger={<Button icon={<HiOutlineDotsVertical />} buttonType="link" />}
    horizontalPlacement="right"
    verticalPlacement="top"
  >
    <Menu.Item label="Profile" icon={<HiOutlineUserCircle />} />

    <Menu.Item label="Settings" icon={<HiOutlineCog />} />

    <Menu.Divider />

    <Menu.Item label="Logout" icon={<HiOutlineLogout />} />
  </Menu>
</div>

Name	Description	Default Value
trigger	trigger component to open menu `Element`	--
children	menu content, can contain both items and dividers `ReactNode`	--
portalParent	parent of the portal container rendering the menu `HTMLElement \| undefined`	`typeof window !== 'undefined' ? document.body : undefined`
verticalPlacement	vertical placement of the menu item, it could be either `top` (render the menu at top of the trigger) or `bottom` (render menu at bottom) `"top" \| "bottom" \| undefined`	`bottom`
horizontalPlacement	horizontal placement of the menu item, it could be either `left` (the left position of menu and trigger co-incide) or `right` (the right position of the menu and trigger co-incide) `"left" \| "right" \| undefined`	`left`

Menu.Item Props

Name	Description	Default Value
label	menu item text `string`	--
icon	menu item icon `Element \| undefined`	--
onClick	function to be called on menu item click `((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void) \| undefined`	--
className	additional class `string \| undefined`	--
style	additional styles `CSSProperties \| undefined`	--