|$ curl https://forge-ai.dev/api/markdown?path=docs/components/dropdowns

$cat docs/dropdowns.md

updated Recently·16 min read·published

Dropdowns

◆CSS◆HTML◆Tailwind◆Bootstrap◆UI◆Intermediate🎯Free Tools

Introduction

Dropdown menus save space by hiding actions until the user needs them. This guide covers production-ready dropdown patterns in plain HTML/CSS, Tailwind CSS, and Bootstrap — including hover and click triggers, icons, headers, nested submenus, split buttons, sizing, positioning, and accessibility.

ℹ

info

Prefer click triggers over hover on touch devices. Use aria-expanded to communicate open/closed state to screen readers.

Hover Dropdown

Pure CSS dropdown that opens on hover — no JavaScript required. Best for desktop navigation with mouse users.

hover-dropdown

Live

untitled.html

HTML

1	<div class="wrapper">
2	<div class="dropdown">
3	<button class="trigger">
4	File ▾
5	</button>
6	<div class="menu">
7	<a href="#" class="item">
8	New File
9	<span class="shortcut">
10	⌘N
11	</span>
12	</a>
13	<a href="#" class="item">
14	Open...
15	<span class="shortcut">
16	⌘O
17	</span>
18	</a>
19	<div class="divider">
20	</div>
21	<a href="#" class="item">
22	Save
23	<span class="shortcut">
24	⌘S
25	</span>
26	</a>
27	<a href="#" class="item">
28	Save As...
29	<span class="shortcut">
30	⇧⌘S
31	</span>
32	</a>
33	<div class="divider">
34	</div>
35	<a href="#" class="item danger">
36	Close
37	</a>
38	</div>
39	</div>
40	<div class="dropdown">
41	<button class="trigger">
42	Edit ▾
43	</button>
44	<div class="menu">
45	<a href="#" class="item">
46	Undo
47	<span class="shortcut">
48	⌘Z
49	</span>
50	</a>
51	<a href="#" class="item">
52	Redo
53	<span class="shortcut">
54	⇧⌘Z
55	</span>
56	</a>
57	<div class="divider">
58	</div>
59	<a href="#" class="item">
60	Cut
61	<span class="shortcut">
62	⌘X
63	</span>
64	</a>
65	<a href="#" class="item">
66	Copy
67	<span class="shortcut">
68	⌘C
69	</span>
70	</a>
71	<a href="#" class="item">
72	Paste
73	<span class="shortcut">
74	⌘V
75	</span>
76	</a>
77	</div>
78	</div>
79	</div>

untitled.html

HTML

1	<div class="flex gap-4 items-start justify-center p-8 bg-[#0A0A0A]">
2	<div class="group relative inline-flex">
3	<button class="px-5 py-2.5 rounded-lg text-[13px] font-semibold border border-[#333] bg-[#1A1A1A] text-[#E0E0E0] hover:bg-[#222] hover:border-[#00FF41] transition-all">
4	File ▾
5	</button>
6	<div class="absolute top-[calc(100%+6px)] left-0 min-w-[200px] bg-[#151515] border border-[#333] rounded-lg p-1.5 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto group-hover:translate-y-0 -translate-y-1 transition-all z-20 shadow-[0_8px_24px_rgba(0,0,0,0.4)]">
7	<a href="#" class="flex items-center justify-between px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
8	New File
9	<span class="text-[10px] text-[#666] font-mono">
10	⌘N
11	</span>
12	</a>
13	<a href="#" class="flex items-center justify-between px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
14	Open...
15	<span class="text-[10px] text-[#666] font-mono">
16	⌘O
17	</span>
18	</a>
19	<div class="h-px bg-[#2A2A2A] my-1 mx-2">
20	</div>
21	<a href="#" class="flex items-center justify-between px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
22	Save
23	<span class="text-[10px] text-[#666] font-mono">
24	⌘S
25	</span>
26	</a>
27	<a href="#" class="flex items-center justify-between px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
28	Save As...
29	<span class="text-[10px] text-[#666] font-mono">
30	⇧⌘S
31	</span>
32	</a>
33	<div class="h-px bg-[#2A2A2A] my-1 mx-2">
34	</div>
35	<a href="#" class="flex items-center justify-between px-3 py-2 rounded-md text-xs text-[#EF4444] hover:bg-[rgba(239,68,68,0.1)] transition-colors">
36	Close
37	</a>
38	</div>
39	</div>
40	<div class="group relative inline-flex">
41	<button class="px-5 py-2.5 rounded-lg text-[13px] font-semibold border border-[#333] bg-[#1A1A1A] text-[#E0E0E0] hover:bg-[#222] hover:border-[#00FF41] transition-all">
42	Edit ▾
43	</button>
44	<div class="absolute top-[calc(100%+6px)] left-0 min-w-[200px] bg-[#151515] border border-[#333] rounded-lg p-1.5 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto group-hover:translate-y-0 -translate-y-1 transition-all z-20 shadow-[0_8px_24px_rgba(0,0,0,0.4)]">
45	<a href="#" class="flex items-center justify-between px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
46	Undo
47	<span class="text-[10px] text-[#666] font-mono">
48	⌘Z
49	</span>
50	</a>
51	<a href="#" class="flex items-center justify-between px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
52	Redo
53	<span class="text-[10px] text-[#666] font-mono">
54	⇧⌘Z
55	</span>
56	</a>
57	<div class="h-px bg-[#2A2A2A] my-1 mx-2">
58	</div>
59	<a href="#" class="flex items-center justify-between px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
60	Cut
61	<span class="text-[10px] text-[#666] font-mono">
62	⌘X
63	</span>
64	</a>
65	<a href="#" class="flex items-center justify-between px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
66	Copy
67	<span class="text-[10px] text-[#666] font-mono">
68	⌘C
69	</span>
70	</a>
71	<a href="#" class="flex items-center justify-between px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
72	Paste
73	<span class="text-[10px] text-[#666] font-mono">
74	⌘V
75	</span>
76	</a>
77	</div>
78	</div>
79	</div>

untitled.html

HTML

1	<div class="d-flex gap-3 align-items-start justify-content-center p-4">
2	<div class="dropdown">
3	<button class="btn btn-dark border-secondary dropdown-toggle fw-semibold" data-bs-toggle="dropdown" aria-expanded="false" style="--bs-btn-bg:#1A1A1A;--bs-btn-color:#E0E0E0;--bs-btn-border-color:#333;--bs-btn-hover-bg:#222;--bs-btn-hover-border-color:#00FF41">
4	File
5	</button>
6	<ul class="dropdown-menu dropdown-menu-dark" style="--bs-dropdown-bg:#151515;--bs-dropdown-border-color:#333;--bs-dropdown-link-color:#C0C0C0;--bs-dropdown-link-hover-color:#E0E0E0;--bs-dropdown-link-hover-bg:#2A2A2A;--bs-dropdown-divider-bg:#2A2A2A">
7	<li>
8	<a class="dropdown-item d-flex justify-content-between" href="#">
9	New File
10	<span class="text-secondary font-monospace small">
11	⌘N
12	</span>
13	</a>
14	</li>
15	<li>
16	<a class="dropdown-item d-flex justify-content-between" href="#">
17	Open...
18	<span class="text-secondary font-monospace small">
19	⌘O
20	</span>
21	</a>
22	</li>
23	<li>
24	<hr class="dropdown-divider">
25	</li>
26	<li>
27	<a class="dropdown-item d-flex justify-content-between" href="#">
28	Save
29	<span class="text-secondary font-monospace small">
30	⌘S
31	</span>
32	</a>
33	</li>
34	<li>
35	<a class="dropdown-item d-flex justify-content-between" href="#">
36	Save As...
37	<span class="text-secondary font-monospace small">
38	⇧⌘S
39	</span>
40	</a>
41	</li>
42	<li>
43	<hr class="dropdown-divider">
44	</li>
45	<li>
46	<a class="dropdown-item text-danger" href="#">
47	Close
48	</a>
49	</li>
50	</ul>
51	</div>
52	<div class="dropdown">
53	<button class="btn btn-dark border-secondary dropdown-toggle fw-semibold" data-bs-toggle="dropdown" aria-expanded="false" style="--bs-btn-bg:#1A1A1A;--bs-btn-color:#E0E0E0;--bs-btn-border-color:#333;--bs-btn-hover-bg:#222;--bs-btn-hover-border-color:#00FF41">
54	Edit
55	</button>
56	<ul class="dropdown-menu dropdown-menu-dark" style="--bs-dropdown-bg:#151515;--bs-dropdown-border-color:#333;--bs-dropdown-link-color:#C0C0C0;--bs-dropdown-link-hover-color:#E0E0E0;--bs-dropdown-link-hover-bg:#2A2A2A;--bs-dropdown-divider-bg:#2A2A2A">
57	<li>
58	<a class="dropdown-item d-flex justify-content-between" href="#">
59	Undo
60	<span class="text-secondary font-monospace small">
61	⌘Z
62	</span>
63	</a>
64	</li>
65	<li>
66	<a class="dropdown-item d-flex justify-content-between" href="#">
67	Redo
68	<span class="text-secondary font-monospace small">
69	⇧⌘Z
70	</span>
71	</a>
72	</li>
73	<li>
74	<hr class="dropdown-divider">
75	</li>
76	<li>
77	<a class="dropdown-item d-flex justify-content-between" href="#">
78	Cut
79	<span class="text-secondary font-monospace small">
80	⌘X
81	</span>
82	</a>
83	</li>
84	<li>
85	<a class="dropdown-item d-flex justify-content-between" href="#">
86	Copy
87	<span class="text-secondary font-monospace small">
88	⌘C
89	</span>
90	</a>
91	</li>
92	<li>
93	<a class="dropdown-item d-flex justify-content-between" href="#">
94	Paste
95	<span class="text-secondary font-monospace small">
96	⌘V
97	</span>
98	</a>
99	</li>
100	</ul>
101	</div>
102	</div>

preview

Click Toggle

Dropdown with JavaScript click toggle — stays open until the trigger is clicked again or the user clicks outside. Works reliably on mobile and desktop.

click-dropdown

Live

untitled.html

HTML

1	<div class="wrapper">
2	<div class="click-dropdown">
3	<button class="trigger" data-toggle>
4	Account ▾
5	</button>
6	<div class="click-menu" id="account-menu">
7	<div class="menu-header">
8	<div class="avatar">
9	JD
10	</div>
11	<div>
12	<div class="name">
13	Jane Doe
14	</div>
15	<div class="email">
16	jane@example.com
17	</div>
18	</div>
19	</div>
20	<div class="divider">
21	</div>
22	<a href="#" class="item">
23	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
24	<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
25	<circle cx="12" cy="7" r="4"/>
26	</svg>
27	Profile
28	</a>
29	<a href="#" class="item">
30	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
31	<circle cx="12" cy="12" r="3"/>
32	<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
33	</svg>
34	Settings
35	</a>
36	<a href="#" class="item">
37	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
38	<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
39	<polyline points="16 17 21 12 16 7"/>
40	<line x1="21" y1="12" x2="9" y2="12"/>
41	</svg>
42	Sign Out
43	</a>
44	</div>
45	</div>
46	<div class="click-dropdown">
47	<button class="trigger" data-toggle>
48	Actions ▾
49	</button>
50	<div class="click-menu">
51	<a href="#" class="item">
52	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
53	<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
54	</svg>
55	Quick Action
56	</a>
57	<a href="#" class="item">
58	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
59	<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
60	<polyline points="14 2 14 8 20 8"/>
61	</svg>
62	Export
63	</a>
64	<a href="#" class="item danger">
65	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
66	<polyline points="3 6 5 6 21 6"/>
67	<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
68	</svg>
69	Delete
70	</a>
71	</div>
72	</div>
73	</div>

untitled.html

HTML

1	<div class="flex gap-8 items-start justify-center p-8 bg-[#0A0A0A]">
2	<div class="relative inline-flex">
3	<button data-toggle aria-expanded="false" class="px-5 py-2.5 rounded-lg text-[13px] font-semibold border border-[#333] bg-[#1A1A1A] text-[#E0E0E0] hover:bg-[#222] hover:border-[#00FF41] transition-all">
4	Account ▾
5	</button>
6	<div class="click-menu absolute top-[calc(100%+6px)] left-0 min-w-[220px] bg-[#151515] border border-[#333] rounded-lg p-1.5 hidden z-20 shadow-[0_8px_24px_rgba(0,0,0,0.4)]">
7	<div class="flex items-center gap-2.5 px-3 py-2 pb-2.5">
8	<div class="w-8 h-8 rounded-full bg-[#00FF41] text-[#0A0A0A] flex items-center justify-center text-xs font-bold">
9	JD
10	</div>
11	<div>
12	<div class="text-xs font-semibold text-[#E0E0E0]">
13	Jane Doe
14	</div>
15	<div class="text-[10px] text-[#666]">
16	jane@example.com
17	</div>
18	</div>
19	</div>
20	<div class="h-px bg-[#2A2A2A] my-1 mx-2">
21	</div>
22	<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
23	<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
24	<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
25	<circle cx="12" cy="7" r="4"/>
26	</svg>
27	Profile
28	</a>
29	<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
30	<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
31	<circle cx="12" cy="12" r="3"/>
32	<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
33	</svg>
34	Settings
35	</a>
36	<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
37	<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
38	<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
39	<polyline points="16 17 21 12 16 7"/>
40	<line x1="21" y1="12" x2="9" y2="12"/>
41	</svg>
42	Sign Out
43	</a>
44	</div>
45	</div>
46	<div class="relative inline-flex">
47	<button data-toggle aria-expanded="false" class="px-5 py-2.5 rounded-lg text-[13px] font-semibold border border-[#333] bg-[#1A1A1A] text-[#E0E0E0] hover:bg-[#222] hover:border-[#00FF41] transition-all">
48	Actions ▾
49	</button>
50	<div class="click-menu absolute top-[calc(100%+6px)] left-0 min-w-[220px] bg-[#151515] border border-[#333] rounded-lg p-1.5 hidden z-20 shadow-[0_8px_24px_rgba(0,0,0,0.4)]">
51	<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
52	<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
53	<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
54	</svg>
55	Quick Action
56	</a>
57	<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
58	<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
59	<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
60	<polyline points="14 2 14 8 20 8"/>
61	</svg>
62	Export
63	</a>
64	<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-md text-xs text-[#EF4444] hover:bg-[rgba(239,68,68,0.1)] transition-colors">
65	<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
66	<polyline points="3 6 5 6 21 6"/>
67	<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
68	</svg>
69	Delete
70	</a>
71	</div>
72	</div>
73	</div>

untitled.html

HTML

1	<div class="d-flex gap-4 align-items-start justify-content-center p-4">
2	<div class="dropdown">
3	<button class="btn btn-dark border-secondary dropdown-toggle fw-semibold" data-bs-toggle="dropdown" aria-expanded="false" style="--bs-btn-bg:#1A1A1A;--bs-btn-color:#E0E0E0;--bs-btn-border-color:#333;--bs-btn-hover-bg:#222;--bs-btn-hover-border-color:#00FF41">
4	Account
5	</button>
6	<ul class="dropdown-menu dropdown-menu-dark" style="--bs-dropdown-bg:#151515;--bs-dropdown-border-color:#333;--bs-dropdown-link-color:#C0C0C0;--bs-dropdown-link-hover-color:#E0E0E0;--bs-dropdown-link-hover-bg:#2A2A2A;--bs-dropdown-divider-bg:#2A2A2A">
7	<li>
8	<h6 class="dropdown-header d-flex align-items-center gap-2">
9	<span class="rounded-circle d-inline-flex align-items-center justify-content-center" style="width:32px;height:32px;background:#00FF41;color:#0A0A0A;font-size:12px">
10	JD
11	</span>
12	<div>
13	<div class="fw-semibold small">
14	Jane Doe
15	</div>
16	<div class="text-secondary" style="font-size:10px">
17	jane@example.com
18	</div>
19	</div>
20	</h6>
21	</li>
22	<li>
23	<hr class="dropdown-divider">
24	</li>
25	<li>
26	<a class="dropdown-item d-inline-flex align-items-center gap-2" href="#">
27	<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
28	<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
29	<circle cx="12" cy="7" r="4"/>
30	</svg>
31	Profile
32	</a>
33	</li>
34	<li>
35	<a class="dropdown-item d-inline-flex align-items-center gap-2" href="#">
36	<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
37	<circle cx="12" cy="12" r="3"/>
38	<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
39	</svg>
40	Settings
41	</a>
42	</li>
43	<li>
44	<a class="dropdown-item d-inline-flex align-items-center gap-2" href="#">
45	<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
46	<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
47	<polyline points="16 17 21 12 16 7"/>
48	<line x1="21" y1="12" x2="9" y2="12"/>
49	</svg>
50	Sign Out
51	</a>
52	</li>
53	</ul>
54	</div>
55	<div class="dropdown">
56	<button class="btn btn-dark border-secondary dropdown-toggle fw-semibold" data-bs-toggle="dropdown" aria-expanded="false" style="--bs-btn-bg:#1A1A1A;--bs-btn-color:#E0E0E0;--bs-btn-border-color:#333;--bs-btn-hover-bg:#222;--bs-btn-hover-border-color:#00FF41">
57	Actions
58	</button>
59	<ul class="dropdown-menu dropdown-menu-dark" style="--bs-dropdown-bg:#151515;--bs-dropdown-border-color:#333;--bs-dropdown-link-color:#C0C0C0;--bs-dropdown-link-hover-color:#E0E0E0;--bs-dropdown-link-hover-bg:#2A2A2A;--bs-dropdown-divider-bg:#2A2A2A">
60	<li>
61	<a class="dropdown-item d-inline-flex align-items-center gap-2" href="#">
62	<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
63	<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
64	</svg>
65	Quick Action
66	</a>
67	</li>
68	<li>
69	<a class="dropdown-item d-inline-flex align-items-center gap-2" href="#">
70	<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
71	<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
72	<polyline points="14 2 14 8 20 8"/>
73	</svg>
74	Export
75	</a>
76	</li>
77	<li>
78	<hr class="dropdown-divider">
79	</li>
80	<li>
81	<a class="dropdown-item d-inline-flex align-items-center gap-2 text-danger" href="#">
82	<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
83	<polyline points="3 6 5 6 21 6"/>
84	<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
85	</svg>
86	Delete
87	</a>
88	</li>
89	</ul>
90	</div>
91	</div>

preview

Nested Submenus

Multi-level dropdown with submenus that open on hover. Keep nesting shallow — two levels is usually enough.

nested

Live

untitled.html

HTML

1	<div class="wrapper">
2	<div class="nested-drop">
3	<button class="trigger">
4	Menu ▾
5	</button>
6	<div class="nested-menu">
7	<a href="#" class="item">
8	Dashboard
9	</a>
10	<a href="#" class="item">
11	Analytics
12	</a>
13	<div class="has-sub">
14	<a href="#" class="item">
15	Reports ▸
16	</a>
17	<div class="submenu">
18	<a href="#" class="item">
19	Sales Report
20	</a>
21	<a href="#" class="item">
22	User Report
23	</a>
24	<a href="#" class="item">
25	Error Report
26	</a>
27	<div class="divider">
28	</div>
29	<a href="#" class="item">
30	Custom Report
31	</a>
32	</div>
33	</div>
34	<div class="divider">
35	</div>
36	<div class="has-sub">
37	<a href="#" class="item">
38	Settings ▸
39	</a>
40	<div class="submenu">
41	<a href="#" class="item">
42	General
43	</a>
44	<a href="#" class="item">
45	Security
46	</a>
47	<a href="#" class="item">
48	Notifications
49	</a>
50	<div class="divider">
51	</div>
52	<a href="#" class="item">
53	Advanced
54	</a>
55	</div>
56	</div>
57	<a href="#" class="item">
58	Help
59	</a>
60	</div>
61	</div>
62	</div>

untitled.html

HTML

1	<div class="flex items-start justify-center p-8 bg-[#0A0A0A]">
2	<div class="group relative inline-flex">
3	<button class="px-5 py-2.5 rounded-lg text-[13px] font-semibold border border-[#333] bg-[#1A1A1A] text-[#E0E0E0] hover:bg-[#222] hover:border-[#00FF41] transition-all">
4	Menu ▾
5	</button>
6	<div class="absolute top-[calc(100%+6px)] left-0 min-w-[200px] bg-[#151515] border border-[#333] rounded-lg p-1.5 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto group-hover:translate-y-0 -translate-y-1 transition-all z-20 shadow-[0_8px_24px_rgba(0,0,0,0.4)]">
7	<a href="#" class="block px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
8	Dashboard
9	</a>
10	<a href="#" class="block px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
11	Analytics
12	</a>
13	<div class="group/sub relative">
14	<a href="#" class="flex items-center justify-between px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
15	Reports ▸
16	</a>
17	<div class="absolute top-[-6px] left-[calc(100%+4px)] min-w-[180px] bg-[#151515] border border-[#333] rounded-lg p-1.5 opacity-0 pointer-events-none group-hover/sub:opacity-100 group-hover/sub:pointer-events-auto transition-all z-30 shadow-[0_8px_24px_rgba(0,0,0,0.4)]">
18	<a href="#" class="block px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
19	Sales Report
20	</a>
21	<a href="#" class="block px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
22	User Report
23	</a>
24	<a href="#" class="block px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
25	Error Report
26	</a>
27	<div class="h-px bg-[#2A2A2A] my-1 mx-2">
28	</div>
29	<a href="#" class="block px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
30	Custom Report
31	</a>
32	</div>
33	</div>
34	<div class="h-px bg-[#2A2A2A] my-1 mx-2">
35	</div>
36	<div class="group/sub relative">
37	<a href="#" class="flex items-center justify-between px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
38	Settings ▸
39	</a>
40	<div class="absolute top-[-6px] left-[calc(100%+4px)] min-w-[180px] bg-[#151515] border border-[#333] rounded-lg p-1.5 opacity-0 pointer-events-none group-hover/sub:opacity-100 group-hover/sub:pointer-events-auto transition-all z-30 shadow-[0_8px_24px_rgba(0,0,0,0.4)]">
41	<a href="#" class="block px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
42	General
43	</a>
44	<a href="#" class="block px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
45	Security
46	</a>
47	<a href="#" class="block px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
48	Notifications
49	</a>
50	<div class="h-px bg-[#2A2A2A] my-1 mx-2">
51	</div>
52	<a href="#" class="block px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
53	Advanced
54	</a>
55	</div>
56	</div>
57	<a href="#" class="block px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
58	Help
59	</a>
60	</div>
61	</div>
62	</div>

untitled.html

HTML

1	<div class="d-flex justify-content-center p-4">
2	<div class="dropdown">
3	<button class="btn btn-dark border-secondary dropdown-toggle fw-semibold" data-bs-toggle="dropdown" aria-expanded="false" style="--bs-btn-bg:#1A1A1A;--bs-btn-color:#E0E0E0;--bs-btn-border-color:#333;--bs-btn-hover-bg:#222;--bs-btn-hover-border-color:#00FF41">
4	Menu
5	</button>
6	<ul class="dropdown-menu dropdown-menu-dark" style="--bs-dropdown-bg:#151515;--bs-dropdown-border-color:#333;--bs-dropdown-link-color:#C0C0C0;--bs-dropdown-link-hover-color:#E0E0E0;--bs-dropdown-link-hover-bg:#2A2A2A;--bs-dropdown-divider-bg:#2A2A2A">
7	<li>
8	<a class="dropdown-item" href="#">
9	Dashboard
10	</a>
11	</li>
12	<li>
13	<a class="dropdown-item" href="#">
14	Analytics
15	</a>
16	</li>
17	<li class="dropend">
18	<a class="dropdown-item dropdown-toggle d-flex justify-content-between" href="#" data-bs-toggle="dropdown" aria-expanded="false">
19	Reports
20	</a>
21	<ul class="dropdown-menu dropdown-menu-dark" style="--bs-dropdown-bg:#151515;--bs-dropdown-border-color:#333;--bs-dropdown-link-color:#C0C0C0;--bs-dropdown-link-hover-color:#E0E0E0;--bs-dropdown-link-hover-bg:#2A2A2A;--bs-dropdown-divider-bg:#2A2A2A">
22	<li>
23	<a class="dropdown-item" href="#">
24	Sales Report
25	</a>
26	</li>
27	<li>
28	<a class="dropdown-item" href="#">
29	User Report
30	</a>
31	</li>
32	<li>
33	<a class="dropdown-item" href="#">
34	Error Report
35	</a>
36	</li>
37	<li>
38	<hr class="dropdown-divider">
39	</li>
40	<li>
41	<a class="dropdown-item" href="#">
42	Custom Report
43	</a>
44	</li>
45	</ul>
46	</li>
47	<li>
48	<hr class="dropdown-divider">
49	</li>
50	<li class="dropend">
51	<a class="dropdown-item dropdown-toggle d-flex justify-content-between" href="#" data-bs-toggle="dropdown" aria-expanded="false">
52	Settings
53	</a>
54	<ul class="dropdown-menu dropdown-menu-dark" style="--bs-dropdown-bg:#151515;--bs-dropdown-border-color:#333;--bs-dropdown-link-color:#C0C0C0;--bs-dropdown-link-hover-color:#E0E0E0;--bs-dropdown-link-hover-bg:#2A2A2A;--bs-dropdown-divider-bg:#2A2A2A">
55	<li>
56	<a class="dropdown-item" href="#">
57	General
58	</a>
59	</li>
60	<li>
61	<a class="dropdown-item" href="#">
62	Security
63	</a>
64	</li>
65	<li>
66	<a class="dropdown-item" href="#">
67	Notifications
68	</a>
69	</li>
70	<li>
71	<hr class="dropdown-divider">
72	</li>
73	<li>
74	<a class="dropdown-item" href="#">
75	Advanced
76	</a>
77	</li>
78	</ul>
79	</li>
80	<li>
81	<a class="dropdown-item" href="#">
82	Help
83	</a>
84	</li>
85	</ul>
86	</div>
87	</div>

preview

Split Button Dropdown

Split the primary action from the dropdown menu so users can perform the most common action in one click.

split-button

Live

untitled.html

HTML

1	<div class="wrapper">
2	<div class="split">
3	<button class="main">
4	Save
5	</button>
6	<button class="caret" aria-label="More save options" data-toggle>
7	▾
8	</button>
9	<div class="menu">
10	<a href="#" class="item">
11	Save as draft
12	</a>
13	<a href="#" class="item">
14	Save and publish
15	</a>
16	<div class="divider">
17	</div>
18	<a href="#" class="item danger">
19	Discard
20	</a>
21	</div>
22	</div>
23	<div class="split outline">
24	<button class="main">
25	Export
26	</button>
27	<button class="caret" aria-label="Export options" data-toggle>
28	▾
29	</button>
30	<div class="menu">
31	<a href="#" class="item">
32	Export as PDF
33	</a>
34	<a href="#" class="item">
35	Export as CSV
36	</a>
37	<a href="#" class="item">
38	Export as JSON
39	</a>
40	</div>
41	</div>
42	</div>

untitled.html

HTML

1	<div class="flex gap-6 items-start justify-center p-8 bg-[#0A0A0A]">
2	<div class="relative inline-flex">
3	<button class="px-4 py-2.5 rounded-l-lg text-[13px] font-semibold border border-r-0 border-[#333] bg-[#00FF41] text-[#0A0A0A] hover:bg-[#00E63A] transition-all">
4	Save
5	</button>
6	<button data-toggle aria-label="More save options" class="px-3 py-2.5 rounded-r-lg text-[13px] font-semibold border border-[#333] bg-[#00FF41] text-[#0A0A0A] hover:bg-[#00E63A] transition-all inline-flex items-center justify-center">
7	▾
8	</button>
9	<div class="click-menu absolute top-[calc(100%+6px)] right-0 min-w-[180px] bg-[#151515] border border-[#333] rounded-lg p-1.5 hidden z-20 shadow-[0_8px_24px_rgba(0,0,0,0.4)]">
10	<a href="#" class="block px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
11	Save as draft
12	</a>
13	<a href="#" class="block px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
14	Save and publish
15	</a>
16	<div class="h-px bg-[#2A2A2A] my-1 mx-2">
17	</div>
18	<a href="#" class="block px-3 py-2 rounded-md text-xs text-[#EF4444] hover:bg-[rgba(239,68,68,0.1)] transition-colors">
19	Discard
20	</a>
21	</div>
22	</div>
23	<div class="relative inline-flex">
24	<button class="px-4 py-2.5 rounded-l-lg text-[13px] font-semibold border border-r-0 border-[#2A2A3E] bg-[#1A1A1A] text-[#E0E0E0] hover:bg-[#22223A] transition-all">
25	Export
26	</button>
27	<button data-toggle aria-label="Export options" class="px-3 py-2.5 rounded-r-lg text-[13px] font-semibold border border-[#2A2A3E] bg-[#1A1A1E] text-[#E0E0E0] hover:bg-[#22223A] transition-all inline-flex items-center justify-center">
28	▾
29	</button>
30	<div class="click-menu absolute top-[calc(100%+6px)] right-0 min-w-[180px] bg-[#151515] border border-[#333] rounded-lg p-1.5 hidden z-20 shadow-[0_8px_24px_rgba(0,0,0,0.4)]">
31	<a href="#" class="block px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
32	Export as PDF
33	</a>
34	<a href="#" class="block px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
35	Export as CSV
36	</a>
37	<a href="#" class="block px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
38	Export as JSON
39	</a>
40	</div>
41	</div>
42	</div>

untitled.html

HTML

1	<div class="d-flex gap-3 align-items-start justify-content-center p-4">
2	<div class="btn-group">
3	<button type="button" class="btn btn-success fw-semibold" style="--bs-btn-bg:#00FF41;--bs-btn-color:#0A0A0A;--bs-btn-border-color:#333;--bs-btn-hover-bg:#00E63A">
4	Save
5	</button>
6	<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More save options" style="--bs-btn-bg:#00FF41;--bs-btn-color:#0A0A0A;--bs-btn-border-color:#333;--bs-btn-hover-bg:#00E63A">
7	<span class="visually-hidden">
8	Toggle Dropdown
9	</span>
10	</button>
11	<ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end" style="--bs-dropdown-bg:#151515;--bs-dropdown-border-color:#333;--bs-dropdown-link-color:#C0C0C0;--bs-dropdown-link-hover-color:#E0E0E0;--bs-dropdown-link-hover-bg:#2A2A2A;--bs-dropdown-divider-bg:#2A2A2A">
12	<li>
13	<a class="dropdown-item" href="#">
14	Save as draft
15	</a>
16	</li>
17	<li>
18	<a class="dropdown-item" href="#">
19	Save and publish
20	</a>
21	</li>
22	<li>
23	<hr class="dropdown-divider">
24	</li>
25	<li>
26	<a class="dropdown-item text-danger" href="#">
27	Discard
28	</a>
29	</li>
30	</ul>
31	</div>
32	<div class="btn-group">
33	<button type="button" class="btn btn-dark fw-semibold border-secondary">
34	Export
35	</button>
36	<button type="button" class="btn btn-dark dropdown-toggle dropdown-toggle-split border-secondary" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Export options">
37	<span class="visually-hidden">
38	Toggle Dropdown
39	</span>
40	</button>
41	<ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end" style="--bs-dropdown-bg:#151515;--bs-dropdown-border-color:#333;--bs-dropdown-link-color:#C0C0C0;--bs-dropdown-link-hover-color:#E0E0E0;--bs-dropdown-link-hover-bg:#2A2A2A;--bs-dropdown-divider-bg:#2A2A2A">
42	<li>
43	<a class="dropdown-item" href="#">
44	Export as PDF
45	</a>
46	</li>
47	<li>
48	<a class="dropdown-item" href="#">
49	Export as CSV
50	</a>
51	</li>
52	<li>
53	<a class="dropdown-item" href="#">
54	Export as JSON
55	</a>
56	</li>
57	</ul>
58	</div>
59	</div>

preview

Sizes

Match the dropdown trigger size to the surrounding UI — small for dense tables, large for hero actions.

sizes

Live

untitled.html

HTML

1	<div class="wrapper">
2	<div class="dropdown sm">
3	<button class="trigger">
4	Small ▾
5	</button>
6	<div class="menu">
7	<a href="#" class="item">
8	View
9	</a>
10	<a href="#" class="item">
11	Edit
12	</a>
13	<a href="#" class="item">
14	Delete
15	</a>
16	</div>
17	</div>
18	<div class="dropdown md">
19	<button class="trigger">
20	Default ▾
21	</button>
22	<div class="menu">
23	<a href="#" class="item">
24	View
25	</a>
26	<a href="#" class="item">
27	Edit
28	</a>
29	<a href="#" class="item">
30	Delete
31	</a>
32	</div>
33	</div>
34	<div class="dropdown lg">
35	<button class="trigger">
36	Large ▾
37	</button>
38	<div class="menu">
39	<a href="#" class="item">
40	View
41	</a>
42	<a href="#" class="item">
43	Edit
44	</a>
45	<a href="#" class="item">
46	Delete
47	</a>
48	</div>
49	</div>
50	</div>

untitled.html

HTML

1	<div class="flex gap-6 items-start justify-center p-8 bg-[#0A0A0A]">
2	<div class="group relative inline-flex">
3	<button class="px-3 py-1.5 rounded-md text-[11px] font-semibold border border-[#333] bg-[#1A1A1A] text-[#E0E0E0] hover:bg-[#222] hover:border-[#00FF41] transition-all">
4	Small ▾
5	</button>
6	<div class="absolute top-[calc(100%+6px)] left-0 min-w-[140px] bg-[#151515] border border-[#333] rounded-lg p-1.5 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto group-hover:translate-y-0 -translate-y-1 transition-all z-20 shadow-[0_8px_24px_rgba(0,0,0,0.4)]">
7	<a href="#" class="block px-2.5 py-1.5 rounded-md text-[11px] text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
8	View
9	</a>
10	<a href="#" class="block px-2.5 py-1.5 rounded-md text-[11px] text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
11	Edit
12	</a>
13	<a href="#" class="block px-2.5 py-1.5 rounded-md text-[11px] text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
14	Delete
15	</a>
16	</div>
17	</div>
18	<div class="group relative inline-flex">
19	<button class="px-5 py-2.5 rounded-lg text-[13px] font-semibold border border-[#333] bg-[#1A1A1A] text-[#E0E0E0] hover:bg-[#222] hover:border-[#00FF41] transition-all">
20	Default ▾
21	</button>
22	<div class="absolute top-[calc(100%+6px)] left-0 min-w-[140px] bg-[#151515] border border-[#333] rounded-lg p-1.5 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto group-hover:translate-y-0 -translate-y-1 transition-all z-20 shadow-[0_8px_24px_rgba(0,0,0,0.4)]">
23	<a href="#" class="block px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
24	View
25	</a>
26	<a href="#" class="block px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
27	Edit
28	</a>
29	<a href="#" class="block px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
30	Delete
31	</a>
32	</div>
33	</div>
34	<div class="group relative inline-flex">
35	<button class="px-7 py-3.5 rounded-xl text-[15px] font-semibold border border-[#333] bg-[#1A1A1A] text-[#E0E0E0] hover:bg-[#222] hover:border-[#00FF41] transition-all">
36	Large ▾
37	</button>
38	<div class="absolute top-[calc(100%+6px)] left-0 min-w-[160px] bg-[#151515] border border-[#333] rounded-lg p-1.5 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto group-hover:translate-y-0 -translate-y-1 transition-all z-20 shadow-[0_8px_24px_rgba(0,0,0,0.4)]">
39	<a href="#" class="block px-3.5 py-2.5 rounded-md text-[13px] text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
40	View
41	</a>
42	<a href="#" class="block px-3.5 py-2.5 rounded-md text-[13px] text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
43	Edit
44	</a>
45	<a href="#" class="block px-3.5 py-2.5 rounded-md text-[13px] text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
46	Delete
47	</a>
48	</div>
49	</div>
50	</div>

untitled.html

HTML

1	<div class="d-flex gap-3 align-items-start justify-content-center p-4">
2	<div class="dropdown">
3	<button class="btn btn-dark btn-sm border-secondary dropdown-toggle fw-semibold" data-bs-toggle="dropdown" aria-expanded="false" style="--bs-btn-bg:#1A1A1A;--bs-btn-color:#E0E0E0;--bs-btn-border-color:#333;--bs-btn-hover-bg:#222;--bs-btn-hover-border-color:#00FF41">
4	Small
5	</button>
6	<ul class="dropdown-menu dropdown-menu-dark" style="--bs-dropdown-bg:#151515;--bs-dropdown-border-color:#333;--bs-dropdown-link-color:#C0C0C0;--bs-dropdown-link-hover-color:#E0E0E0;--bs-dropdown-link-hover-bg:#2A2A2A;--bs-dropdown-divider-bg:#2A2A2A">
7	<li>
8	<a class="dropdown-item small" href="#">
9	View
10	</a>
11	</li>
12	<li>
13	<a class="dropdown-item small" href="#">
14	Edit
15	</a>
16	</li>
17	<li>
18	<a class="dropdown-item small text-danger" href="#">
19	Delete
20	</a>
21	</li>
22	</ul>
23	</div>
24	<div class="dropdown">
25	<button class="btn btn-dark border-secondary dropdown-toggle fw-semibold" data-bs-toggle="dropdown" aria-expanded="false" style="--bs-btn-bg:#1A1A1A;--bs-btn-color:#E0E0E0;--bs-btn-border-color:#333;--bs-btn-hover-bg:#222;--bs-btn-hover-border-color:#00FF41">
26	Default
27	</button>
28	<ul class="dropdown-menu dropdown-menu-dark" style="--bs-dropdown-bg:#151515;--bs-dropdown-border-color:#333;--bs-dropdown-link-color:#C0C0C0;--bs-dropdown-link-hover-color:#E0E0E0;--bs-dropdown-link-hover-bg:#2A2A2A;--bs-dropdown-divider-bg:#2A2A2A">
29	<li>
30	<a class="dropdown-item" href="#">
31	View
32	</a>
33	</li>
34	<li>
35	<a class="dropdown-item" href="#">
36	Edit
37	</a>
38	</li>
39	<li>
40	<a class="dropdown-item text-danger" href="#">
41	Delete
42	</a>
43	</li>
44	</ul>
45	</div>
46	<div class="dropdown">
47	<button class="btn btn-dark btn-lg border-secondary dropdown-toggle fw-semibold" data-bs-toggle="dropdown" aria-expanded="false" style="--bs-btn-bg:#1A1A1A;--bs-btn-color:#E0E0E0;--bs-btn-border-color:#333;--bs-btn-hover-bg:#222;--bs-btn-hover-border-color:#00FF41">
48	Large
49	</button>
50	<ul class="dropdown-menu dropdown-menu-dark" style="--bs-dropdown-bg:#151515;--bs-dropdown-border-color:#333;--bs-dropdown-link-color:#C0C0C0;--bs-dropdown-link-hover-color:#E0E0E0;--bs-dropdown-link-hover-bg:#2A2A2A;--bs-dropdown-divider-bg:#2A2A2A">
51	<li>
52	<a class="dropdown-item" href="#">
53	View
54	</a>
55	</li>
56	<li>
57	<a class="dropdown-item" href="#">
58	Edit
59	</a>
60	</li>
61	<li>
62	<a class="dropdown-item text-danger" href="#">
63	Delete
64	</a>
65	</li>
66	</ul>
67	</div>
68	</div>

preview

Directions

Dropdowns can open up, right, or left depending on available viewport space. Use click toggles so the menu does not cover the trigger.

directions

Live

untitled.html

HTML

1	<div class="wrapper">
2	<div class="click-dropdown">
3	<button class="trigger" data-toggle>
4	Dropup ▾
5	</button>
6	<div class="click-menu dropup">
7	<a href="#" class="item">
8	Item A
9	</a>
10	<a href="#" class="item">
11	Item B
12	</a>
13	<a href="#" class="item">
14	Item C
15	</a>
16	</div>
17	</div>
18	<div class="click-dropdown">
19	<button class="trigger" data-toggle>
20	Dropend ▸
21	</button>
22	<div class="click-menu dropend">
23	<a href="#" class="item">
24	Item A
25	</a>
26	<a href="#" class="item">
27	Item B
28	</a>
29	<a href="#" class="item">
30	Item C
31	</a>
32	</div>
33	</div>
34	<div class="click-dropdown">
35	<button class="trigger" data-toggle>
36	Dropstart ◂
37	</button>
38	<div class="click-menu dropstart">
39	<a href="#" class="item">
40	Item A
41	</a>
42	<a href="#" class="item">
43	Item B
44	</a>
45	<a href="#" class="item">
46	Item C
47	</a>
48	</div>
49	</div>
50	</div>

untitled.html

HTML

1	<div class="flex gap-6 items-center justify-center p-8 bg-[#0A0A0A]" style="height:260px">
2	<div class="relative inline-flex">
3	<button data-toggle aria-expanded="false" class="px-5 py-2.5 rounded-lg text-[13px] font-semibold border border-[#333] bg-[#1A1A1A] text-[#E0E0E0] hover:bg-[#222] hover:border-[#00FF41] transition-all">
4	Dropup ▾
5	</button>
6	<div class="click-menu absolute bottom-[calc(100%+6px)] left-0 min-w-[140px] bg-[#151515] border border-[#333] rounded-lg p-1.5 hidden z-20 shadow-[0_8px_24px_rgba(0,0,0,0.4)]">
7	<a href="#" class="block px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
8	Item A
9	</a>
10	<a href="#" class="block px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
11	Item B
12	</a>
13	<a href="#" class="block px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
14	Item C
15	</a>
16	</div>
17	</div>
18	<div class="relative inline-flex">
19	<button data-toggle aria-expanded="false" class="px-5 py-2.5 rounded-lg text-[13px] font-semibold border border-[#333] bg-[#1A1A1A] text-[#E0E0E0] hover:bg-[#222] hover:border-[#00FF41] transition-all">
20	Dropend ▸
21	</button>
22	<div class="click-menu absolute top-0 left-[calc(100%+6px)] min-w-[140px] bg-[#151515] border border-[#333] rounded-lg p-1.5 hidden z-20 shadow-[0_8px_24px_rgba(0,0,0,0.4)]">
23	<a href="#" class="block px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
24	Item A
25	</a>
26	<a href="#" class="block px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
27	Item B
28	</a>
29	<a href="#" class="block px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
30	Item C
31	</a>
32	</div>
33	</div>
34	<div class="relative inline-flex">
35	<button data-toggle aria-expanded="false" class="px-5 py-2.5 rounded-lg text-[13px] font-semibold border border-[#333] bg-[#1A1A1A] text-[#E0E0E0] hover:bg-[#222] hover:border-[#00FF41] transition-all">
36	Dropstart ◂
37	</button>
38	<div class="click-menu absolute top-0 right-[calc(100%+6px)] min-w-[140px] bg-[#151515] border border-[#333] rounded-lg p-1.5 hidden z-20 shadow-[0_8px_24px_rgba(0,0,0,0.4)]">
39	<a href="#" class="block px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
40	Item A
41	</a>
42	<a href="#" class="block px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
43	Item B
44	</a>
45	<a href="#" class="block px-3 py-2 rounded-md text-xs text-[#C0C0C0] hover:bg-[#2A2A2A] hover:text-[#E0E0E0] transition-colors">
46	Item C
47	</a>
48	</div>
49	</div>
50	</div>

untitled.html

HTML

1	<div class="d-flex gap-4 align-items-center justify-content-center p-4" style="height:260px">
2	<div class="dropup">
3	<button class="btn btn-dark border-secondary dropdown-toggle fw-semibold" data-bs-toggle="dropdown" aria-expanded="false" style="--bs-btn-bg:#1A1A1A;--bs-btn-color:#E0E0E0;--bs-btn-border-color:#333;--bs-btn-hover-bg:#222;--bs-btn-hover-border-color:#00FF41">
4	Dropup
5	</button>
6	<ul class="dropdown-menu dropdown-menu-dark" style="--bs-dropdown-bg:#151515;--bs-dropdown-border-color:#333;--bs-dropdown-link-color:#C0C0C0;--bs-dropdown-link-hover-color:#E0E0E0;--bs-dropdown-link-hover-bg:#2A2A2A;--bs-dropdown-divider-bg:#2A2A2A">
7	<li>
8	<a class="dropdown-item" href="#">
9	Item A
10	</a>
11	</li>
12	<li>
13	<a class="dropdown-item" href="#">
14	Item B
15	</a>
16	</li>
17	<li>
18	<a class="dropdown-item" href="#">
19	Item C
20	</a>
21	</li>
22	</ul>
23	</div>
24	<div class="dropend">
25	<button class="btn btn-dark border-secondary dropdown-toggle fw-semibold" data-bs-toggle="dropdown" aria-expanded="false" style="--bs-btn-bg:#1A1A1A;--bs-btn-color:#E0E0E0;--bs-btn-border-color:#333;--bs-btn-hover-bg:#222;--bs-btn-hover-border-color:#00FF41">
26	Dropend
27	</button>
28	<ul class="dropdown-menu dropdown-menu-dark" style="--bs-dropdown-bg:#151515;--bs-dropdown-border-color:#333;--bs-dropdown-link-color:#C0C0C0;--bs-dropdown-link-hover-color:#E0E0E0;--bs-dropdown-link-hover-bg:#2A2A2A;--bs-dropdown-divider-bg:#2A2A2A">
29	<li>
30	<a class="dropdown-item" href="#">
31	Item A
32	</a>
33	</li>
34	<li>
35	<a class="dropdown-item" href="#">
36	Item B
37	</a>
38	</li>
39	<li>
40	<a class="dropdown-item" href="#">
41	Item C
42	</a>
43	</li>
44	</ul>
45	</div>
46	<div class="dropstart">
47	<button class="btn btn-dark border-secondary dropdown-toggle fw-semibold" data-bs-toggle="dropdown" aria-expanded="false" style="--bs-btn-bg:#1A1A1A;--bs-btn-color:#E0E0E0;--bs-btn-border-color:#333;--bs-btn-hover-bg:#222;--bs-btn-hover-border-color:#00FF41">
48	Dropstart
49	</button>
50	<ul class="dropdown-menu dropdown-menu-dark" style="--bs-dropdown-bg:#151515;--bs-dropdown-border-color:#333;--bs-dropdown-link-color:#C0C0C0;--bs-dropdown-link-hover-color:#E0E0E0;--bs-dropdown-link-hover-bg:#2A2A2A;--bs-dropdown-divider-bg:#2A2A2A">
51	<li>
52	<a class="dropdown-item" href="#">
53	Item A
54	</a>
55	</li>
56	<li>
57	<a class="dropdown-item" href="#">
58	Item B
59	</a>
60	</li>
61	<li>
62	<a class="dropdown-item" href="#">
63	Item C
64	</a>
65	</li>
66	</ul>
67	</div>
68	</div>

preview

Accessibility

Dropdowns are interactive controls, so keyboard and screen-reader support is essential. A well-built dropdown behaves like a disclosure widget or a menu button.

Use a real <button> element for the trigger so it is focusable and activatable with Enter/Space.
Set aria-expanded to true/false on the trigger to reflect open state.
For navigation-style dropdowns, add aria-haspopup="menu" and manage focus inside the menu.
Close the menu on Escape and move focus back to the trigger.
Support arrow-key navigation between items and Home/End to jump to first/last item.
Do not rely on hover alone on touch devices; provide a click alternative.
Ensure color alone does not convey meaning — pair icons or text with status colors.

⚠

warning

Avoid nesting more than two levels of submenus. Deep nesting hurts keyboard navigation and mobile usability.

Community

Get help on Slack, Discord or VIP

Stuck on a guide? Join the community and ask.

Join Slack Join Discord Kaundal VIP

X GitHub YouTube Instagram Facebook Discord Slack Telegram Buy me a coffee Ko-fi Sponsor

1	.wrapper {
2	display:flex;
3	gap:16px;
4	align-items:flex-start;
5	justify-content:center;
6	padding:32px
7	}
8	.dropdown {
9	position:relative;
10	display:inline-flex
11	}
12	.trigger {
13	padding:10px 20px;
14	border-radius:8px;
15	font-size:13px;
16	font-weight:600;
17	font-family:system-ui,
18	sans-serif;
19	cursor:pointer;
20	border:1px solid #333;
21	background:#1A1A1A;
22	color:#E0E0E0;
23	transition:all .2s
24	}
25	.trigger:hover {
26	background:#222;
27	border-color:#00FF41
28	}
29	.menu {
30	position:absolute;
31	top:calc(100% + 6px);
32	left:0;
33	min-width:200px;
34	background:#151515;
35	border:1px solid #333;
36	border-radius:8px;
37	padding:6px;
38	opacity:0;
39	pointer-events:none;
40	transform:translateY(-4px);
41	transition:all .2s ease;
42	z-index:20;
43	box-shadow:0 8px 24px rgba(0,
44	0,
45	0,
46	.4)
47	}
48	.dropdown:hover .menu {
49	opacity:1;
50	pointer-events:auto;
51	transform:translateY(0)
52	}
53	.item {
54	display:flex;
55	align-items:center;
56	justify-content:space-between;
57	padding:8px 12px;
58	border-radius:6px;
59	font-size:12px;
60	font-family:system-ui,
61	sans-serif;
62	color:#C0C0C0;
63	text-decoration:none;
64	transition:all .15s;
65	cursor:pointer
66	}
67	.item:hover {
68	background:#2A2A2A;
69	color:#E0E0E0
70	}
71	.shortcut {
72	font-size:10px;
73	color:#666;
74	font-family:monospace
75	}
76	.divider {
77	height:1px;
78	background:#2A2A2A;
79	margin:4px 8px
80	}
81	.danger {
82	color:#EF4444
83	}
84	.danger:hover {
85	background:rgba(239,
86	68,
87	68,
88	.1);
89	color:#EF4444
90	}

1	.wrapper {
2	display:flex;
3	gap:32px;
4	align-items:flex-start;
5	justify-content:center;
6	padding:32px
7	}
8	.click-dropdown {
9	position:relative;
10	display:inline-flex
11	}
12	.trigger {
13	padding:10px 20px;
14	border-radius:8px;
15	font-size:13px;
16	font-weight:600;
17	font-family:system-ui,
18	sans-serif;
19	cursor:pointer;
20	border:1px solid #333;
21	background:#1A1A1A;
22	color:#E0E0E0;
23	transition:all .2s
24	}
25	.trigger:hover {
26	background:#222;
27	border-color:#00FF41
28	}
29	.click-menu {
30	position:absolute;
31	top:calc(100% + 6px);
32	left:0;
33	min-width:220px;
34	background:#151515;
35	border:1px solid #333;
36	border-radius:8px;
37	padding:6px;
38	display:none;
39	z-index:20;
40	box-shadow:0 8px 24px rgba(0,
41	0,
42	0,
43	.4)
44	}
45	.click-menu.open {
46	display:block
47	}
48	.item {
49	display:flex;
50	align-items:center;
51	gap:10px;
52	padding:8px 12px;
53	border-radius:6px;
54	font-size:12px;
55	font-family:system-ui,
56	sans-serif;
57	color:#C0C0C0;
58	text-decoration:none;
59	transition:all .15s;
60	cursor:pointer
61	}
62	.item:hover {
63	background:#2A2A2A;
64	color:#E0E0E0
65	}
66	.item.danger {
67	color:#EF4444
68	}
69	.item.danger:hover {
70	background:rgba(239,
71	68,
72	68,
73	.1)
74	}
75	.divider {
76	height:1px;
77	background:#2A2A2A;
78	margin:4px 8px
79	}
80	.menu-header {
81	display:flex;
82	align-items:center;
83	gap:10px;
84	padding:8px 12px 10px
85	}
86	.avatar {
87	width:32px;
88	height:32px;
89	border-radius:50%;
90	background:#00FF41;
91	color:#0A0A0A;
92	display:flex;
93	align-items:center;
94	justify-content:center;
95	font-size:12px;
96	font-weight:700;
97	font-family:system-ui,
98	sans-serif
99	}
100	.name {
101	font-size:12px;
102	font-weight:600;
103	color:#E0E0E0
104	}
105	.email {
106	font-size:10px;
107	color:#666;
108	margin-top:2px
109	}

1	.wrapper {
2	display:flex;
3	gap:24px;
4	align-items:flex-start;
5	justify-content:center;
6	padding:32px
7	}
8	.split {
9	position:relative;
10	display:inline-flex
11	}
12	.split button {
13	font-size:13px;
14	font-weight:600;
15	font-family:system-ui,
16	sans-serif;
17	cursor:pointer;
18	border:1px solid #333;
19	background:#00FF41;
20	color:#0A0A0A;
21	transition:all .2s;
22	line-height:1
23	}
24	.split button:hover {
25	background:#00E63A
26	}
27	.main {
28	padding:10px 18px;
29	border-radius:8px 0 0 8px;
30	border-right:1px solid rgba(0,
31	0,
32	0,
33	.15)
34	}
35	.caret {
36	padding:10px 12px;
37	border-radius:0 8px 8px 0;
38	display:inline-flex;
39	align-items:center;
40	justify-content:center
41	}
42	.menu {
43	position:absolute;
44	top:calc(100% + 6px);
45	right:0;
46	min-width:180px;
47	background:#151515;
48	border:1px solid #333;
49	border-radius:8px;
50	padding:6px;
51	display:none;
52	z-index:20;
53	box-shadow:0 8px 24px rgba(0,
54	0,
55	0,
56	.4)
57	}
58	.menu.open {
59	display:block
60	}
61	.item {
62	display:block;
63	padding:8px 12px;
64	border-radius:6px;
65	font-size:12px;
66	font-family:system-ui,
67	sans-serif;
68	color:#C0C0C0;
69	text-decoration:none;
70	transition:all .15s;
71	cursor:pointer
72	}
73	.item:hover {
74	background:#2A2A2A;
75	color:#E0E0E0
76	}
77	.divider {
78	height:1px;
79	background:#2A2A2A;
80	margin:4px 8px
81	}
82	.danger {
83	color:#EF4444
84	}
85	.danger:hover {
86	background:rgba(239,
87	68,
88	68,
89	.1)
90	}
91	.outline button {
92	background:#1A1A1A;
93	color:#E0E0E0;
94	border-color:#2A2A3E
95	}
96	.outline button:hover {
97	background:#22223A
98	}
99	.outline .main {
100	border-right-color:#2A2A3E
101	}