Dropdown Menu

Question

Opens on click, closes on outside click.

Accepted Answer

import './index.css'; import React, { useState, useRef, useEffect } from 'react'; function App() { const [open, setOpen] = useState(false); const ref = useRef(); useEffect(() => { function handleClick(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); } document.addEventListener('mousedown', handleClick); return () => document.removeEventListener('mousedown', handleClick); }, []); return (

Dropdown Menu

{open && (

Item 1
Item 2
Item 3

)}

); } export default App; body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; background: #f5f5f5; } * { box-sizing: border-box; } .dropdown-demo { max-width: 400px; margin: 60px auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); padding: 32px 24px; text-align: center; position: relative; } .dropdown-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem; color: #1f2937; } .dropdown-btn { padding: 0.7rem 1.5rem; font-size: 1.1rem; font-weight: 600; border: none; border-radius: 8px; background: #2563eb; color: #fff; cursor: pointer; transition: background 0.2s; } .dropdown-btn:hover { background: #1d4ed8; } .dropdown-list { position: absolute; left: 50%; transform: translateX(-50%); top: 70px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); list-style: none; padding: 0.5rem 0; margin: 0; min-width: 160px; z-index: 10; } .dropdown-item { padding: 0.7rem 1.2rem; color: #334155; font-size: 1rem; cursor: pointer; transition: background 0.2s; } .dropdown-item:hover { background: #f1f5f9; }