<div class="accordion-menu">
<details open>
<summary>👤 My Account</summary>
<ul>
<li><a href="#">Profile</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Billing</a></li>
</ul>
</details>
<details>
<summary>📊 Analytics</summary>
<ul>
<li><a href="#">Reports</a></li>
<li><a href="#">Overview</a></li>
</ul>
</details>
<details>
<summary>💬 Messages</summary>
<ul>
<li><a href="#">Inbox</a></li>
<li><a href="#">Sent</a></li>
<li><a href="#">Archived</a></li>
</ul>
</details>
</div>
Back to Snippets
Vertical Accordion Menu CSS
Navigate complex menus easily with this vertical accordion. It allows you to nest links inside collapsible categories using the native details element, which saves vertical space in your sidebar navigation.
316