> For the complete documentation index, see [llms.txt](https://v1-6-0.pipui.ru/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://v1-6-0.pipui.ru/components/dropdown.md).

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

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

{% embed url="<https://codepen.io/pipui/pen/WNyEPbw>" %}
Пример простейшего выпадающего меню
{% endembed %}

```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="#" 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>
```

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

{% embed url="<https://codepen.io/pipui/pen/vYrJbNM>" %}
Пример многоуровневого выпадающего меню
{% endembed %}

```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="#" 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>
```