> For the complete documentation index, see [llms.txt](https://v2-0-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://v2-0-0.pipui.ru/components/navmenu.md).

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

## Общая информация <a href="#general-information" id="general-information"></a>

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

### Простое меню <a href="#basic-menu" id="basic-menu"></a>

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

{% embed url="<https://codepen.io/pipui/pen/yLqQYYW>" %}
Пример работы кода выше
{% endembed %}

### Многоуровневое меню <a href="#tree-menu" id="tree-menu"></a>

Меню навигации поддерживает многоуровневое меню.

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

{% embed url="<https://codepen.io/pipui/pen/RwBqWOe>" %}
Пример работы кода выше
{% endembed %}

### Меню под спойлером <a href="#collapsed-menu" id="collapsed-menu"></a>

Вы так же можете использовать данное меню вместе со [спойлерами](/components/collapse.md).

```html
<ul class="nav-menu">
    <li class="nav-menu-item active"><a href="#" rel="nofollow" class="nav-menu-link">Menu #1</a></li>
    <li class="nav-menu-item"><a href="#" rel="nofollow" class="nav-menu-link">Menu #2</a></li>
    <li class="nav-menu-item">
        <a href="#" rel="nofollow" class="nav-menu-link" data-collapse="#navmenu-sub">Menu #3 <i class="fa-solid fa-caret-down"></i></a>
        <ul class="nav-sub-menu collapse" id="navmenu-sub">
            <li class="nav-menu-item"><a href="#" rel="nofollow" class="nav-menu-link">Submenu #1</a></li>
            <li class="nav-menu-item"><a href="#" rel="nofollow" class="nav-menu-link">Submenu #2</a></li>
            <li class="nav-menu-item">
                <a href="#" rel="nofollow" class="nav-menu-link" data-collapse="#navmenu-sub2">Menu #3 <i class="fa-solid fa-caret-down"></i></a>
                <ul class="nav-sub-menu collapse" id="navmenu-sub2">
                    <li class="nav-menu-item"><a href="#" rel="nofollow" class="nav-menu-link">Submenu #1</a></li>
                    <li class="nav-menu-item"><a href="#" rel="nofollow" class="nav-menu-link">Submenu #2</a></li>
                    <li class="nav-menu-item"><a href="#" rel="nofollow" class="nav-menu-link">Submenu #3</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
```

### Иконки <a href="#icons" id="icons"></a>

Если есть необходимость добавить иконки, Вы можете добавить блок <mark style="color:orange;">`.link-icon`</mark> внутрь блока <mark style="color:orange;">`.nav-menu-link`</mark> с вашей иконкой или текстом