Accordion
Tailwind Accordion is a collapsible UI element built using Tailwind. It allows users to expand and collapse sections of content by clicking on headers, revealing and hiding information on demand.
Basic Usage
Use data-mv-accordion selector to enable accordion behavior where clicking a section header expands its content, while others collapse.
MVUi embraces flexible licensing options that empower you to choose the
perfect fit for your project's needs and budget.
MVUi embraces flexible licensing options that empower you to choose the
perfect fit for your project's needs and budget.
MVUi embraces flexible licensing options that empower you to choose the
perfect fit for your project's needs and budget.
<div data-mv-accordion="true" class="mv-accordion">
<div data-mv-accordion-item="true" class="mv-accordion-item">
<button id="accordion_toggle_a0" data-mv-accordion-toggle="true" aria-controls="accordion_content_a0" class="mv-accordion-toggle">
<span class="mv-accordion-title">How is pricing determined for each plan?</span><span aria-hidden="true" class="mv-accordion-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus mv-accordion-indicator-on" aria-hidden="true">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus mv-accordion-indicator-off" aria-hidden="true">
<path d="M5 12h14"></path></svg></span>
</button>
<div class="mv-accordion-content hidden" aria-labelledby="accordion_toggle_a0" id="accordion_content_a0">
<div class="mv-accordion-wrapper">
MVUi embraces flexible licensing options that empower you to choose the
perfect fit for your project's needs and budget.
</div>
</div>
</div>
<div data-mv-accordion-item="true" class="mv-accordion-item">
<button id="accordion_toggle_a1" data-mv-accordion-toggle="true" aria-controls="accordion_content_a1" class="mv-accordion-toggle">
<span class="mv-accordion-title">What payment methods are accepted for subscriptions?</span><span aria-hidden="true" class="mv-accordion-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus mv-accordion-indicator-on" aria-hidden="true">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus mv-accordion-indicator-off" aria-hidden="true">
<path d="M5 12h14"></path></svg></span>
</button>
<div class="mv-accordion-content hidden" aria-labelledby="accordion_toggle_a1" id="accordion_content_a1">
<div class="mv-accordion-wrapper">
MVUi embraces flexible licensing options that empower you to choose the
perfect fit for your project's needs and budget.
</div>
</div>
</div>
<div data-mv-accordion-item="true" class="mv-accordion-item">
<button id="accordion_toggle_a2" data-mv-accordion-toggle="true" aria-controls="accordion_content_a2" class="mv-accordion-toggle">
<span class="mv-accordion-title">Are there any hidden fees in the pricing?</span><span aria-hidden="true" class="mv-accordion-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus mv-accordion-indicator-on" aria-hidden="true">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus mv-accordion-indicator-off" aria-hidden="true">
<path d="M5 12h14"></path></svg></span>
</button>
<div class="mv-accordion-content hidden" aria-labelledby="accordion_toggle_a2" id="accordion_content_a2">
<div class="mv-accordion-wrapper">
MVUi embraces flexible licensing options that empower you to choose the
perfect fit for your project's needs and budget.
</div>
</div>
</div>
</div>Default Open
Use active class on an accordion to display a specific section by default.
MVUi embraces flexible licensing options that empower you to choose the
perfect fit for your project's needs and budget.
MVUi embraces flexible licensing options that empower you to choose the
perfect fit for your project's needs and budget.
MVUi embraces flexible licensing options that empower you to choose the
perfect fit for your project's needs and budget.
<div data-mv-accordion="true" class="mv-accordion">
<div data-mv-accordion-item="true" class="mv-accordion-item active">
<button id="accordion_toggle_b0" data-mv-accordion-toggle="true" aria-controls="accordion_content_b0" class="mv-accordion-toggle">
<span class="mv-accordion-title">How is pricing determined for each plan?</span><span aria-hidden="true" class="mv-accordion-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus mv-accordion-indicator-on" aria-hidden="true">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus mv-accordion-indicator-off" aria-hidden="true">
<path d="M5 12h14"></path></svg></span>
</button>
<div class="mv-accordion-content" aria-labelledby="accordion_toggle_b0" id="accordion_content_b0">
<div class="mv-accordion-wrapper">
MVUi embraces flexible licensing options that empower you to choose the
perfect fit for your project's needs and budget.
</div>
</div>
</div>
<div data-mv-accordion-item="true" class="mv-accordion-item">
<button id="accordion_toggle_b1" data-mv-accordion-toggle="true" aria-controls="accordion_content_b1" class="mv-accordion-toggle">
<span class="mv-accordion-title">What payment methods are accepted for subscriptions?</span><span aria-hidden="true" class="mv-accordion-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus mv-accordion-indicator-on" aria-hidden="true">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus mv-accordion-indicator-off" aria-hidden="true">
<path d="M5 12h14"></path></svg></span>
</button>
<div class="mv-accordion-content hidden" aria-labelledby="accordion_toggle_b1" id="accordion_content_b1">
<div class="mv-accordion-wrapper">
MVUi embraces flexible licensing options that empower you to choose the
perfect fit for your project's needs and budget.
</div>
</div>
</div>
<div data-mv-accordion-item="true" class="mv-accordion-item">
<button id="accordion_toggle_b2" data-mv-accordion-toggle="true" aria-controls="accordion_content_b2" class="mv-accordion-toggle">
<span class="mv-accordion-title">Are there any hidden fees in the pricing?</span><span aria-hidden="true" class="mv-accordion-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus mv-accordion-indicator-on" aria-hidden="true">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus mv-accordion-indicator-off" aria-hidden="true">
<path d="M5 12h14"></path></svg></span>
</button>
<div class="mv-accordion-content hidden" aria-labelledby="accordion_toggle_b2" id="accordion_content_b2">
<div class="mv-accordion-wrapper">
MVUi embraces flexible licensing options that empower you to choose the
perfect fit for your project's needs and budget.
</div>
</div>
</div>
</div>Expand All
Use data-mv-accordion-expand-all="true" attribute to keep all accordions visible at all times despite toggling.
MVUi embraces flexible licensing options that empower you to choose the
perfect fit for your project's needs and budget.
MVUi embraces flexible licensing options that empower you to choose the
perfect fit for your project's needs and budget.
MVUi embraces flexible licensing options that empower you to choose the
perfect fit for your project's needs and budget.
<div data-mv-accordion="true" data-mv-accordion-expand-all="true" class="mv-accordion">
<div data-mv-accordion-item="true" class="mv-accordion-item active">
<button id="accordion_toggle_c0" data-mv-accordion-toggle="true" aria-controls="accordion_content_c0" class="mv-accordion-toggle">
<span class="mv-accordion-title">How is pricing determined for each plan?</span><span aria-hidden="true" class="mv-accordion-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus mv-accordion-indicator-on" aria-hidden="true">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus mv-accordion-indicator-off" aria-hidden="true">
<path d="M5 12h14"></path></svg></span>
</button>
<div class="mv-accordion-content" aria-labelledby="accordion_toggle_c0" id="accordion_content_c0">
<div class="mv-accordion-wrapper">
MVUi embraces flexible licensing options that empower you to choose the
perfect fit for your project's needs and budget.
</div>
</div>
</div>
<div data-mv-accordion-item="true" class="mv-accordion-item">
<button id="accordion_toggle_c1" data-mv-accordion-toggle="true" aria-controls="accordion_content_c1" class="mv-accordion-toggle">
<span class="mv-accordion-title">What payment methods are accepted for subscriptions?</span><span aria-hidden="true" class="mv-accordion-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus mv-accordion-indicator-on" aria-hidden="true">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus mv-accordion-indicator-off" aria-hidden="true">
<path d="M5 12h14"></path></svg></span>
</button>
<div class="mv-accordion-content hidden" aria-labelledby="accordion_toggle_c1" id="accordion_content_c1">
<div class="mv-accordion-wrapper">
MVUi embraces flexible licensing options that empower you to choose the
perfect fit for your project's needs and budget.
</div>
</div>
</div>
<div data-mv-accordion-item="true" class="mv-accordion-item">
<button id="accordion_toggle_c2" data-mv-accordion-toggle="true" aria-controls="accordion_content_c2" class="mv-accordion-toggle">
<span class="mv-accordion-title">Are there any hidden fees in the pricing?</span><span aria-hidden="true" class="mv-accordion-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus mv-accordion-indicator-on" aria-hidden="true">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus mv-accordion-indicator-off" aria-hidden="true">
<path d="M5 12h14"></path></svg></span>
</button>
<div class="mv-accordion-content hidden" aria-labelledby="accordion_toggle_c2" id="accordion_content_c2">
<div class="mv-accordion-wrapper">
MVUi embraces flexible licensing options that empower you to choose the
perfect fit for your project's needs and budget.
</div>
</div>
</div>
</div>Outline Style
Apply mv-accordion-outline class to add custom border styles to your accordion.
MVUi embraces flexible licensing options that empower you to choose the
perfect fit for your project's needs and budget.
MVUi embraces flexible licensing options that empower you to choose the
perfect fit for your project's needs and budget.
MVUi embraces flexible licensing options that empower you to choose the
perfect fit for your project's needs and budget.
<div data-mv-accordion="true" data-mv-accordion-expand-all="true" class="mv-accordion mv-accordion-outline">
<div data-mv-accordion-item="true" class="mv-accordion-item active">
<button id="accordion_toggle_d0" data-mv-accordion-toggle="true" aria-controls="accordion_content_d0" class="mv-accordion-toggle">
<span class="mv-accordion-title">How is pricing determined for each plan?</span><span aria-hidden="true" class="mv-accordion-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus mv-accordion-indicator-on" aria-hidden="true">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus mv-accordion-indicator-off" aria-hidden="true">
<path d="M5 12h14"></path></svg></span>
</button>
<div class="mv-accordion-content" aria-labelledby="accordion_toggle_d0" id="accordion_content_d0">
<div class="mv-accordion-wrapper">
MVUi embraces flexible licensing options that empower you to choose the
perfect fit for your project's needs and budget.
</div>
</div>
</div>
<div data-mv-accordion-item="true" class="mv-accordion-item">
<button id="accordion_toggle_d1" data-mv-accordion-toggle="true" aria-controls="accordion_content_d1" class="mv-accordion-toggle">
<span class="mv-accordion-title">What payment methods are accepted for subscriptions?</span><span aria-hidden="true" class="mv-accordion-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus mv-accordion-indicator-on" aria-hidden="true">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus mv-accordion-indicator-off" aria-hidden="true">
<path d="M5 12h14"></path></svg></span>
</button>
<div class="mv-accordion-content hidden" aria-labelledby="accordion_toggle_d1" id="accordion_content_d1">
<div class="mv-accordion-wrapper">
MVUi embraces flexible licensing options that empower you to choose the
perfect fit for your project's needs and budget.
</div>
</div>
</div>
<div data-mv-accordion-item="true" class="mv-accordion-item">
<button id="accordion_toggle_d2" data-mv-accordion-toggle="true" aria-controls="accordion_content_d2" class="mv-accordion-toggle">
<span class="mv-accordion-title">Are there any hidden fees in the pricing?</span><span aria-hidden="true" class="mv-accordion-indicator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus mv-accordion-indicator-on" aria-hidden="true">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus mv-accordion-indicator-off" aria-hidden="true">
<path d="M5 12h14"></path></svg></span>
</button>
<div class="mv-accordion-content hidden" aria-labelledby="accordion_toggle_d2" id="accordion_content_d2">
<div class="mv-accordion-wrapper">
MVUi embraces flexible licensing options that empower you to choose the
perfect fit for your project's needs and budget.
</div>
</div>
</div>
</div>Navigation Menu
Use accordion to handle advanced navigation menus.
<div class="sm:w-56 border border-border rounded-md p-2">
<ul data-mv-accordion="true" class="mv-accordion-menu">
<li class="mv-accordion-menu-item selected" data-mv-accordion-item="true">
<a href="#" class="mv-accordion-menu-link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house mv-accordion-menu-icon" aria-hidden="true">
<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path>
<path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>Dashboard</a>
</li>
<li class="mv-accordion-menu-item" data-mv-accordion-item="true">
<button data-mv-accordion-toggle="true" id="menu_users_v1" aria-controls="menu_users_sub_v1" class="mv-accordion-menu-toggle">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users mv-accordion-menu-icon" aria-hidden="true">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<circle cx="9" cy="7" r="4"></circle></svg>Users<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mv-accordion-menu-indicator" aria-hidden="true">
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<div id="menu_users_sub_v1" class="mv-accordion-menu-content hidden" aria-labelledby="menu_users_v1">
<ul class="mv-accordion-menu-sub">
<li class="mv-accordion-menu-item" data-mv-accordion-item="true">
<button data-mv-accordion-toggle="true" id="menu_users_sub_1_v1" aria-controls="menu_users_sub_1_sub_v1" class="mv-accordion-menu-toggle">
Sub menu 1<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mv-accordion-menu-indicator" aria-hidden="true">
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<div id="menu_users_sub_1_sub_v1" class="mv-accordion-menu-content hidden" aria-labelledby="menu_users_sub_1_v1">
<ul class="mv-accordion-menu-sub">
<li data-mv-accordion-item="true">
<a href="#" class="mv-accordion-menu-link">Link 1</a>
</li>
<li data-mv-accordion-item="true">
<a href="#" class="mv-accordion-menu-link">Link 2</a>
</li>
<li data-mv-accordion-item="true">
<a href="#" class="mv-accordion-menu-link">Link 3</a>
</li>
</ul>
</div>
</li>
<li class="mv-accordion-menu-item" data-mv-accordion-item="true">
<button data-mv-accordion-toggle="true" id="menu_users_sub_2_v1" aria-controls="menu_users_sub_2_sub_v1" class="mv-accordion-menu-toggle">
Sub menu 2<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mv-accordion-menu-indicator" aria-hidden="true">
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<div id="menu_users_sub_2_sub_v1" class="mv-accordion-menu-content hidden" aria-labelledby="menu_users_sub_2_v1">
<ul class="mv-accordion-menu-sub">
<li data-mv-accordion-item="true">
<a href="#" class="mv-accordion-menu-link">Link 1</a>
</li>
<li data-mv-accordion-item="true">
<a href="#" class="mv-accordion-menu-link">Link 2</a>
</li>
<li data-mv-accordion-item="true">
<a href="#" class="mv-accordion-menu-link">Link 3</a>
</li>
</ul>
</div>
</li>
<li class="mv-accordion-menu-item" data-mv-accordion-item="true">
<button data-mv-accordion-toggle="true" id="menu_users_sub_3_v1" aria-controls="menu_users_sub_3_sub_v1" class="mv-accordion-menu-toggle">
Sub menu 3<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mv-accordion-menu-indicator" aria-hidden="true">
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<div id="menu_users_sub_3_sub_v1" class="mv-accordion-menu-content hidden" aria-labelledby="menu_users_sub_3_v1">
<ul class="mv-accordion-menu-sub">
<li data-mv-accordion-item="true">
<a href="#" class="mv-accordion-menu-link">Link 1</a>
</li>
<li data-mv-accordion-item="true">
<a href="#" class="mv-accordion-menu-link">Link 2</a>
</li>
<li data-mv-accordion-item="true">
<a href="#" class="mv-accordion-menu-link">Link 3</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="mv-accordion-menu-item" data-mv-accordion-item="true">
<button data-mv-accordion-toggle="true" id="menu_tasks_v1" aria-controls="menu_tasks_sub_v1" class="mv-accordion-menu-toggle">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-list-todo mv-accordion-menu-icon" aria-hidden="true">
<path d="M13 5h8"></path>
<path d="M13 12h8"></path>
<path d="M13 19h8"></path>
<path d="m3 17 2 2 4-4"></path>
<rect x="3" y="4" width="6" height="6" rx="1"></rect></svg>Tasks<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mv-accordion-menu-indicator" aria-hidden="true">
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<div id="menu_tasks_sub_v1" class="mv-accordion-menu-content hidden" aria-labelledby="menu_tasks_v1">
<ul class="mv-accordion-menu-sub">
<li data-mv-accordion-item="true">
<a href="#" class="mv-accordion-menu-link">Link 1</a>
</li>
<li data-mv-accordion-item="true">
<a href="#" class="mv-accordion-menu-link">Link 2</a>
</li>
<li data-mv-accordion-item="true">
<a href="#" class="mv-accordion-menu-link">Link 3</a>
</li>
</ul>
</div>
</li>
<li class="mv-accordion-menu-item" data-mv-accordion-item="true">
<button data-mv-accordion-toggle="true" id="menu_events_v1" aria-controls="menu_events_sub_v1" class="mv-accordion-menu-toggle">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-days mv-accordion-menu-icon" aria-hidden="true">
<path d="M8 2v4"></path>
<path d="M16 2v4"></path>
<rect width="18" height="18" x="3" y="4" rx="2"></rect>
<path d="M3 10h18"></path>
<path d="M8 14h.01"></path>
<path d="M12 14h.01"></path>
<path d="M16 14h.01"></path>
<path d="M8 18h.01"></path>
<path d="M12 18h.01"></path>
<path d="M16 18h.01"></path></svg>Events<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mv-accordion-menu-indicator" aria-hidden="true">
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<div id="menu_events_sub_v1" class="mv-accordion-menu-content hidden" aria-labelledby="menu_events_v1">
<ul class="mv-accordion-menu-sub">
<li data-mv-accordion-item="true">
<a href="#" class="mv-accordion-menu-link">Link 1</a>
</li>
<li data-mv-accordion-item="true">
<a href="#" class="mv-accordion-menu-link">Link 2</a>
</li>
<li data-mv-accordion-item="true">
<a href="#" class="mv-accordion-menu-link">Link 3</a>
</li>
</ul>
</div>
</li>
<li data-mv-accordion-item="true">
<a href="#" class="mv-accordion-menu-link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bell mv-accordion-menu-icon" aria-hidden="true">
<path d="M10.268 21a2 2 0 0 0 3.464 0"></path>
<path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg>Notifications<span class="mv-badge mv-badge-primary mv-badge-sm mv-badge-circle ms-auto">New</span></a>
</li>
<li data-mv-accordion-item="true">
<a href="#" class="mv-accordion-menu-link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings mv-accordion-menu-icon" aria-hidden="true">
<path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path>
<circle cx="12" cy="12" r="3"></circle></svg>Settings</a>
</li>
</ul>
</div>