Dropdowns

Dropdowns 10 · Context menu

A compact right-click menu with actions, shortcuts and a hairline before the last item.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='min-h-[360px] bg-neutral-50 p-10'><div class='w-56 overflow-hidden rounded-lg border border-neutral-200 bg-white py-1 text-sm shadow-xl'><a href='#' class='flex items-center justify-between px-3 py-1.5 text-neutral-700 hover:bg-black hover:text-white'>Cut<span class='font-mono text-xs opacity-60'>⌘X</span></a><a href='#' class='flex items-center justify-between px-3 py-1.5 text-neutral-700 hover:bg-black hover:text-white'>Copy<span class='font-mono text-xs opacity-60'>⌘C</span></a><a href='#' class='flex items-center justify-between px-3 py-1.5 text-neutral-700 hover:bg-black hover:text-white'>Paste<span class='font-mono text-xs opacity-60'>⌘V</span></a><div class='my-1 border-t border-neutral-200'></div><a href='#' class='flex items-center justify-between px-3 py-1.5 text-neutral-700 hover:bg-black hover:text-white'>Delete<span class='font-mono text-xs opacity-60'>⌫</span></a></div></div>

Dropdowns 09 · Multi-select with apply

A filter panel with checkboxes for several options and clear and apply buttons at the bottom.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='min-h-[420px] bg-white p-10'><div class='relative inline-block'><button type='button' class='inline-flex items-center gap-2 rounded-lg border border-black px-4 py-2 text-sm font-medium text-black'>Filters · 2 <span class='text-neutral-400'>⌄</span></button><div class='absolute left-0 mt-2 w-64 rounded-2xl border border-neutral-200 bg-white p-4 shadow-xl'><ul class='space-y-3 text-sm text-neutral-700'><li><label class='flex items-center gap-3'><input type='checkbox' checked class='h-4 w-4 accent-black'>Published</label></li><li><label class='flex items-center gap-3'><input type='checkbox' checked class='h-4 w-4 accent-black'>Draft</label></li><li><label class='flex items-center gap-3'><input type='checkbox' class='h-4 w-4 accent-black'>Archived</label></li></ul><div class='mt-4 flex gap-2'><button type='button' class='flex-1 rounded-lg border border-neutral-300 py-2 text-sm font-medium text-black'>Clear</button><button type='button' class='flex-1 rounded-lg bg-black py-2 text-sm font-medium text-white'>Apply</button></div></div></div></div>

Dropdowns 08 · Searchable select

An open list with a search field on top and a few options, one highlighted.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='min-h-[400px] bg-white p-10'><div class='w-72 overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-xl'><div class='border-b border-neutral-200 p-3'><input type='text' placeholder='Search fonts' class='w-full rounded-lg bg-neutral-100 px-3 py-2 text-sm outline-none'></div><ul class='max-h-56 overflow-y-auto p-1 text-sm'><li class='rounded-lg bg-neutral-100 px-3 py-2 font-medium text-black'>Geist</li><li class='rounded-lg px-3 py-2 text-neutral-700 hover:bg-neutral-50'>Inter</li><li class='rounded-lg px-3 py-2 text-neutral-700 hover:bg-neutral-50'>Manrope</li><li class='rounded-lg px-3 py-2 text-neutral-700 hover:bg-neutral-50'>DM Sans</li><li class='rounded-lg px-3 py-2 text-neutral-700 hover:bg-neutral-50'>Space Grotesk</li></ul></div></div>

Dropdowns 07 · Grouped sections

A menu split into labelled groups with small uppercase headings and hairlines between.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='min-h-[440px] bg-white p-10'><div class='relative inline-block'><button type='button' class='inline-flex items-center gap-2 rounded-lg border border-neutral-300 px-4 py-2 text-sm font-medium text-black'>Add element <span class='text-neutral-400'>⌄</span></button><div class='absolute left-0 mt-2 w-60 overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-lg'><p class='px-4 pb-1 pt-3 text-xs font-semibold uppercase tracking-widest text-neutral-400'>Layout</p><a href='#' class='block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50'>Section</a><a href='#' class='block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50'>Grid</a><p class='border-t border-neutral-100 px-4 pb-1 pt-3 text-xs font-semibold uppercase tracking-widest text-neutral-400'>Content</p><a href='#' class='block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50'>Heading</a><a href='#' class='block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50'>Text</a><a href='#' class='block px-4 py-2 pb-3 text-sm text-neutral-700 hover:bg-neutral-50'>Button</a></div></div></div>

Dropdowns 06 · Menu with descriptions

A wider menu where each item has a title and a short description.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='min-h-[420px] bg-white p-10'><div class='relative inline-block'><button type='button' class='inline-flex items-center gap-2 rounded-lg border border-neutral-300 px-4 py-2 text-sm font-medium text-black'>Create <span class='text-neutral-400'>⌄</span></button><div class='absolute left-0 mt-2 w-80 rounded-2xl border border-neutral-200 bg-white p-2 shadow-xl'><a href='#' class='block rounded-xl p-3 hover:bg-neutral-50'><p class='text-sm font-semibold text-black'>Blank page</p><p class='mt-0.5 text-xs text-neutral-500'>Start with an empty canvas.</p></a><a href='#' class='block rounded-xl p-3 hover:bg-neutral-50'><p class='text-sm font-semibold text-black'>From code</p><p class='mt-0.5 text-xs text-neutral-500'>Paste HTML and edit it visually.</p></a><a href='#' class='block rounded-xl p-3 hover:bg-neutral-50'><p class='text-sm font-semibold text-black'>From Figma</p><p class='mt-0.5 text-xs text-neutral-500'>Import a frame with the plugin.</p></a></div></div></div>

Dropdowns 05 · Select with checkmark

A select-style field with an open list; the chosen option has a check.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='min-h-[340px] bg-white p-10'><div class='relative w-64'><label class='text-sm font-medium text-black'>Language</label><button type='button' class='mt-1.5 flex w-full items-center justify-between rounded-lg border border-neutral-300 bg-white px-3 py-2.5 text-left text-sm text-black'>English<span class='text-neutral-400'>⌄</span></button><ul class='absolute left-0 right-0 mt-1 overflow-hidden rounded-xl border border-neutral-200 bg-white py-1 shadow-lg'><li class='flex items-center justify-between bg-neutral-50 px-3 py-2 text-sm font-medium text-black'>English<span>✓</span></li><li class='px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-50'>Deutsch</li><li class='px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-50'>Français</li><li class='px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-50'>Español</li></ul></div></div>

Dropdowns 04 · Dark menu

A black menu with white and grey text opening under a white button.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='min-h-[340px] bg-neutral-100 p-10'><div class='relative inline-block'><button type='button' class='inline-flex items-center gap-2 rounded-lg bg-white px-4 py-2 text-sm font-medium text-black shadow-sm'>Sort by <span class='text-neutral-400'>⌄</span></button><div class='absolute left-0 mt-2 w-52 overflow-hidden rounded-xl border border-neutral-800 bg-black py-1 shadow-xl'><a href='#' class='block px-4 py-2 text-sm text-white'>Newest</a><a href='#' class='block px-4 py-2 text-sm text-neutral-400 hover:text-white'>Oldest</a><a href='#' class='block px-4 py-2 text-sm text-neutral-400 hover:text-white'>Name A to Z</a><a href='#' class='block px-4 py-2 text-sm text-neutral-400 hover:text-white'>Most used</a></div></div></div>

Dropdowns 03 · Account menu

An avatar button with an open menu showing a name and email, links and a sign out row. Sample person.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='min-h-[400px] bg-white p-10'><div class='relative ml-auto w-fit'><button type='button' class='grid h-10 w-10 place-items-center rounded-full bg-black text-sm font-semibold text-white'>AM</button><div class='absolute right-0 mt-2 w-60 overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-xl'><div class='border-b border-neutral-200 px-4 py-3'><p class='text-sm font-semibold text-black'>Alex Morgan</p><p class='text-xs text-neutral-500'>alex@example.com</p></div><div class='py-1'><a href='#' class='block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50'>Profile</a><a href='#' class='block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50'>Projects</a><a href='#' class='block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50'>Settings</a></div><div class='border-t border-neutral-200 py-1'><a href='#' class='block px-4 py-2 text-sm text-black hover:bg-neutral-50'>Sign out</a></div></div></div></div>

Dropdowns 02 · With shortcuts

A menu where each item has a short label and a keyboard shortcut on the right.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='min-h-[360px] bg-white p-10'><div class='relative inline-block'><button type='button' class='inline-flex items-center gap-2 rounded-lg bg-black px-4 py-2 text-sm font-medium text-white'>File <span class='text-neutral-400'>⌄</span></button><div class='absolute left-0 mt-2 w-64 overflow-hidden rounded-xl border border-neutral-200 bg-white py-1 shadow-lg'><a href='#' class='flex items-center justify-between px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50'>New page<span class='font-mono text-xs text-neutral-400'>⌘N</span></a><a href='#' class='flex items-center justify-between px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50'>Open<span class='font-mono text-xs text-neutral-400'>⌘O</span></a><a href='#' class='flex items-center justify-between px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50'>Save<span class='font-mono text-xs text-neutral-400'>⌘S</span></a><div class='my-1 border-t border-neutral-200'></div><a href='#' class='flex items-center justify-between px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50'>Print<span class='font-mono text-xs text-neutral-400'>⌘P</span></a></div></div></div>

Dropdowns 01 · Basic menu

A button with a white menu open beneath it listing four actions.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='min-h-[340px] bg-white p-10'><div class='relative inline-block'><button type='button' class='inline-flex items-center gap-2 rounded-lg border border-neutral-300 bg-white px-4 py-2 text-sm font-medium text-black'>Options <span class='text-neutral-400'>⌄</span></button><div class='absolute left-0 mt-2 w-48 overflow-hidden rounded-xl border border-neutral-200 bg-white py-1 shadow-lg'><a href='#' class='block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50'>Edit</a><a href='#' class='block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50'>Duplicate</a><a href='#' class='block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50'>Move</a><a href='#' class='block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50'>Delete</a></div></div></div>