Выпадающее меню
Компонент выпадающего меню имеет многоуровневую систему вложенности, то позволяет определять множественные разделы и подразделы
HTML
<div class="dropdown">
<button class="btn mt-0 dropdown-trigger">Dropdown Menu <i class="fa-solid fa-caret-down"></i></button>
<ul class="dropdown-target">
<li class="dropdown-item">
<a href="#" class="dropdown-link">Hello</a>
</li>
<li class="dropdown-item">
<a href="#" class="dropdown-link">Hello</a>
</li>
</ul>
</div>
HTML
<div class="dropdown">
<button class="btn mt-0 dropdown-trigger">Dropdown Menu <i class="fa-solid fa-caret-down"></i></button>
<ul class="dropdown-target">
<li class="dropdown-item">
<a href="#" class="dropdown-link">Hello</a>
</li>
<li class="dropdown-item">
<a href="#" class="dropdown-link">Hello</a>
</li>
<li class="dropdown-item dropdown dropdown-submenu">
<a href="#" class="dropdown-link dropdown-trigger">Hello</a>
<ul class="dropdown-target">
<li class="dropdown-item">
<a href="#" class="dropdown-link">Hello</a>
</li>
<li class="dropdown-item">
<a href="#" class="dropdown-link">Hello</a>
</li>
<li class="dropdown-item dropdown dropdown-submenu">
<a href="#" class="dropdown-link dropdown-trigger">Hello</a>
<ul class="dropdown-target">
<li class="dropdown-item">
<a href="#" class="dropdown-link">Hello</a>
</li>
<li class="dropdown-item">
<a href="#" class="dropdown-link">Hello</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Управлять положением выпадающего меню, можно с помощью атрибутов [data-dropdown-x] и [data-dropdown-y] к элементам класса .dropdown со значениями left или right для [data-dropdown-x] и top или bottom для [data-dropdown-y]
Если же требуется автоматическо положение, то следует добавить атрибут [data-dropdown-placement="auto"] элементу класса .dropdown
Стоит отметить, что все вложенные выпадающие списки с классом .dropdown следует использовать совместно с классом .dropdown-submenu во избежание ложных срабатываний