> 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/navmenu.md).

# Меню навигации

Многоуровневое меню навигации позволяет быстро переходить по разделам и категориям. Данное меню используется и в нашей документации(слева).

```html
<ul class="nav-menu">
    <li class="nav-menu-item active"><a href="#" class="nav-menu-link">Menu #1</a></li>
    <li class="nav-menu-item"><a href="#" class="nav-menu-link">Menu #2</a></li>
    <li class="nav-menu-item"><a href="#" class="nav-menu-link">Menu #3</a></li>
</ul>
```

Для добавления подуровней, необходимо добавить к триггеру <mark style="color:orange;">`.nav-menu-link`</mark> класс <mark style="color:orange;">`.nav-menu-toggle`</mark> и после этого элемента добавьте список меню, так же как и родительский, только вместо класса <mark style="color:orange;">`.nav-menu`</mark> используйте класс <mark style="color:orange;">`.nav-sub-menu`</mark> для всех последующих уровней. Пример можно посмотреть ниже

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

```html
<ul class="nav-menu">
    <li class="nav-menu-item active"><a href="#" class="nav-menu-link">Menu #1</a></li>
    <li class="nav-menu-item"><a href="#" class="nav-menu-link">Menu #2</a></li>
    <li class="nav-menu-item">
        <a href="#" class="nav-menu-link nav-menu-toggle">Menu #3 <i class="fa-solid fa-caret-down"></i></a>
        <ul class="nav-sub-menu">
            <li class="nav-menu-item"><a href="#" class="nav-menu-link">Submenu #1</a></li>
            <li class="nav-menu-item"><a href="#" class="nav-menu-link">Submenu #2</a></li>
            <li class="nav-menu-item"><a href="#" class="nav-menu-link">Submenu #3</a></li>
        </ul>
    </li>
</ul>
```