Nested Submenu
A copy-paste dropdowns & menus component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Dropdowns & MenusHTMLCSSany framework
- New file
- Share ›
- Copy link
- Rename
Copy into your project
HTML
<ul class="nuda-sub">
<li class="nuda-sub__item">New file</li>
<li class="nuda-sub__item nuda-sub__item--parent">Share ›
<ul class="nuda-sub__fly">
<li class="nuda-sub__item">Copy link</li>
<li class="nuda-sub__item">Email</li>
</ul>
</li>
<li class="nuda-sub__item">Rename</li>
</ul>CSS
.nuda-sub {
position: relative;
list-style: none;
margin: 0;
padding: .35rem;
min-width: 170px;
background: #141414;
border: 1px solid rgba(255,255,255,.1);
border-radius: 10px;
}
.nuda-sub__item {
position: relative;
padding: .5rem .6rem;
border-radius: 6px;
font-size: .8rem;
color: #cfcfcf;
cursor: pointer;
}
.nuda-sub__item:hover {
background: rgba(228,255,84,.1);
color: #fafafa;
}
.nuda-sub__item--parent {
font-weight: 500;
}
.nuda-sub__fly {
position: absolute;
top: -.35rem;
left: 100%;
margin-left: .3rem;
list-style: none;
padding: .35rem;
min-width: 150px;
background: #141414;
border: 1px solid rgba(255,255,255,.1);
border-radius: 10px;
animation: _subIn .18s ease-out;
}
@keyframes _subIn {
from {
opacity: 0;
transform: translateX(-6px);
}
to {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion:reduce) {
.nuda-sub__fly {
animation: none;
}
}
How to use Nested Submenu
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.