Выпадающее меню

Компонент выпадающего меню имеет многоуровневую систему вложенности, что позволяет определять множественные разделы и подразделы

Пример простейшего выпадающего меню

<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="#" rel="nofollow" class="dropdown-link">Link #1</a>
          </li>

          <li class="dropdown-item">
              <a href="#" rel="nofollow" class="dropdown-link">Link #2</a>
          </li>
      </ul>
  </div>

Ниже представлен пример многоуровневого выпадающего меню

Пример многоуровневого выпадающего меню

<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="#" rel="nofollow" class="dropdown-link">Link #1</a>
        </li>

        <li class="dropdown-item">
            <a href="#" rel="nofollow" class="dropdown-link">Link #1</a>
        </li>

        <li class="dropdown-item dropdown dropdown-submenu">
            <a href="#" rel="nofollow" class="dropdown-link dropdown-trigger">Dropdown <i class="fa-solid fa-caret-down"></i></a>

            <ul class="dropdown-target">
                <li class="dropdown-item">
                    <a href="#" rel="nofollow" class="dropdown-link">Link #1</a>
                </li>

                <li class="dropdown-item">
                    <a href="#" rel="nofollow" class="dropdown-link">Link #2</a>
                </li>

                <li class="dropdown-item dropdown dropdown-submenu">
                    <a href="#" rel="nofollow" class="dropdown-link dropdown-trigger">Dropdown <i class="fa-solid fa-caret-down"></i></a>

                    <ul class="dropdown-target">
                        <li class="dropdown-item">
                            <a href="#" rel="nofollow" class="dropdown-link">Link #1</a>
                        </li>

                        <li class="dropdown-item">
                            <a href="#" rel="nofollow" class="dropdown-link">Link #2</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>