Copy-ready code
Navigation with Modern CSS
Five navigation examples, most without JavaScript, using native disclosure and popover behavior. They include active states, visible keyboard focus, and reduced-motion styles. Test browser support before integration.
Sidebars
For apps and dashboards: an icon rail that expands on hover and a grouped menu using native details elements.
App menu with collapsible groups
: sin JS y accesibles de serie */
.lz-menu__grupo summary {
display: flex;
align-items: center;
justify-content: space-between;
list-style: none;
padding: 12px 10px 6px;
color: #6f6e7f;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
}
.lz-menu__grupo summary::-webkit-details-marker { display: none; }
.lz-menu__grupo summary::after {
content: "";
width: 7px;
height: 7px;
margin-right: 4px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(-45deg);
transition: transform 200ms ease;
}
.lz-menu__grupo[open] summary::after { transform: rotate(45deg); }
.lz-menu__grupo summary:focus-visible { outline: 2px solid #8b7bff; outline-offset: -2px; border-radius: 8px; }
.lz-menu a {
position: relative;
display: flex;
align-items: center;
gap: 10px;
height: 40px;
padding: 0 10px;
border-radius: 10px;
color: inherit;
text-decoration: none;
}
.lz-menu a:hover { background: #1a1826; color: #f4f3f8; }
.lz-menu a[aria-current="page"] { background: rgba(139, 123, 255, 0.16); color: #cdc5ff; }
.lz-menu a[aria-current="page"]::before {
content: "";
position: absolute;
left: -12px;
top: 10px;
bottom: 10px;
width: 3px;
border-radius: 3px;
background: #8b7bff;
}
.lz-menu a:focus-visible { outline: 2px solid #8b7bff; outline-offset: -2px; }
.lz-menu svg { flex: none; width: 18px; height: 18px; }
.lz-menu__num {
margin-left: auto;
min-width: 22px;
padding: 2px 7px;
border-radius: 999px;
background: #35d6c8;
color: #0a0a12;
font-size: 0.72rem;
font-weight: 700;
text-align: center;
}
.lz-menu__cuenta {
height: auto;
margin-top: 10px;
padding: 12px 10px;
border-top: 1px solid #2c2938;
border-radius: 0 0 10px 10px;
color: #f4f3f8;
}
.lz-menu__cuenta i {
flex: none;
width: 30px;
height: 30px;
border-radius: 50%;
background: linear-gradient(135deg, #ffb454, #ff7a68);
}
.lz-menu__cuenta small { display: block; margin-top: 2px; color: #6f6e7f; font-weight: 400; }
@media (prefers-reduced-motion: reduce) {
.lz-menu__grupo summary::after { transition: none; }
}
<nav aria-label="Application menu" class="lz-menu">
<div class="lz-menu__marca"><i aria-hidden="true"></i>Studio</div>
<details class="lz-menu__grupo" open="">
<summary>Work</summary>
<a aria-current="page" href="#"><svg aria-hidden="true" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" viewbox="0 0 24 24"><path d="M3 6h6l2 2h10v11H3z"></path></svg>Projects<span class="lz-menu__num">12</span></a>
<a href="#"><svg aria-hidden="true" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" viewbox="0 0 24 24"><path d="m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z"></path></svg>Favorites</a>
<a href="#"><svg aria-hidden="true" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" viewbox="0 0 24 24"><path d="M12 4v11m-5-5 5 5 5-5M4 20h16"></path></svg>Downloads</a>
</details>
<details class="lz-menu__grupo" open="">
<summary>Account</summary>
<a href="#"><svg aria-hidden="true" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" viewbox="0 0 24 24"><path d="M6 16v-5a6 6 0 0 1 12 0v5l2 2H4zM10 20h4"></path></svg>Notifications<span class="lz-menu__num">3</span></a>
<a href="#"><svg aria-hidden="true" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" viewbox="0 0 24 24"><path d="M4 7h11M19 7h1M4 12h3M11 12h9M4 17h13M21 17h-1"></path><circle cx="17" cy="7" r="2"></circle><circle cx="9" cy="12" r="2"></circle><circle cx="19" cy="17" r="2"></circle></svg>Settings</a>
</details>
<a class="lz-menu__cuenta" href="#"><i aria-hidden="true"></i><span>Andrea Ruiz<small>Pro plan</small></span></a>
</nav>
Mobile and tabs
For websites: a popover drawer, a mobile bottom bar with safe-area spacing, and tabs with a sliding indicator.
Popover navigation drawer
Mobile bottom bar
Tabs with sliding indicator
Use the example in your project
Copy the HTML and CSS for the same piece. If a JavaScript button is shown, include that script too. Keep IDs unique, update links, and test keyboard focus and small screens. These examples demonstrate front-end behavior; forms do not create accounts or submit real orders. Names, testimonials, prices, and metrics are illustrative sample content.
All component categories · CSS generators · Downloadable templates