ساخت لیست کشویی (dropdown) ساده

فایل سی اس اس:

.dropdown {
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: white;
  border: 1px solid black;
}

.dropdown li {
  min-width: 120px;
  cursor: pointer;
  padding: 2px 10px;
}

.dropdown li:hover {
  background: #ddd;
}

کد:

import React, { useState } from "react"
import ElementPopper from "react-element-popper"

export default function App() {
  const [active, setActive] = useState(false)

  const toggleDropDown = () => setActive(!active)

  const button = (
    <button onClick={toggleDropDown}>کلیک کنید</button>
  )

  const list = (
    <ul className="dropdown">
      <li>آیتم 1</li>
      <li>آیتم 2</li>
      <li>آیتم 3</li>
      <li>آیتم 4</li>
    </ul>
  )

  return (
    <ElementPopper
      element={button}
      popper={active && list}
      position="bottom-right"
    />
  )
}

منو کشویی (drop down) با انیمیشن شروع

<ElementPopper
  element={button}
  popper={active && list}
  position="bottom-right"
  animation
/>

منو کشویی در موقعیت چپ

<ElementPopper
  element={button}
  popper={active && list}
  position="left-end"
/>