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

# Панель навигации

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

В качестве навигации по сайту, разработчики часто используют навигационную панель, которую, как правило, располагают в верхней части сайта. В фреймворке PipUI собран компонент для быстрого формирования такой панели

### Разметка <a href="#markup" id="markup"></a>

```html
<div class="navbar">
    <div class="navbar-container">
        <a class="nav-brand" href="#">Название</a>
        <a href="#" rel="nofollow" class="nav-mobile"><i class="nav-mobile-bars"></i></a>
    </div>
</div>
```

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

Цвет панели может быть изменен с помощью классов цвета фона из палитры (<mark style="color:purple;">.bg-{COLOR}</mark>)

Вы можете добавить клсаа <mark style="color:orange;">`.container`</mark> к объекту <mark style="color:orange;">`.navbar-container`</mark>, если хотите, чтобы контейнер был адаптивным.

Для изменения тёмной палитры текста, можно добавить класс <mark style="color:orange;">`.navbar-text-light`</mark> к блоку <mark style="color:orange;">`.navbar`</mark> в этом случае все текстовые элементы будут светлыми.

В панели навигации есть 3 секции: левая (<mark style="color:orange;">`.nav-left`</mark>), правая(<mark style="color:orange;">`.nav-right`</mark>)\
и центральная(<mark style="color:orange;">`.nav-center`</mark>). Чтобы их добавить необходимо внутрь\
блока <mark style="color:orange;">`.navbar-container`</mark> поместить необходимые секции. Именно в эти секции и следует помещать основной список меню.

```html
<div class="navbar">
    <div class="navbar-container container">
        <a class="nav-brand" href="#">Название</a>
        <a href="#" rel="nofollow" class="nav-mobile"><i class="nav-mobile-bars"></i></a>

        <div class="navbar-wrapper">
            <div class="nav-left">
                <ul class="navbar-menu">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Item #1</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#">Item #2</a>
                    </li>
                </ul>
            </div>

            <div class="nav-center">
                <ul class="navbar-menu">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Item #3</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#">Item #4</a>
                    </li>
                </ul>
            </div>

            <div class="nav-right">
                <ul class="navbar-menu">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Item #5</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#">Item #6</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
```

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

### Выпадающее меню <a href="#dropdown-menu" id="dropdown-menu"></a>

Панель навигации поддерживает выпадающее меню, которое инициализируется автоматически, но при желании можно это сделать и вручную, согласно [документации](/components/dropdown.md#inicializaciya-vypadayushego-spiska).

```html
<div class="navbar">
    <div class="navbar-container container">
        <a class="nav-brand" href="#">Название</a>
        <a href="#" rel="nofollow" class="nav-mobile"><i class="nav-mobile-bars"></i></a>

        <div class="navbar-wrapper">
            <div class="nav-right">
                <ul class="navbar-menu">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Item #1</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#">Item #2</a>
                    </li>

                    <li class="nav-item dropdown" data-dropdown-direction-x="left">
                        <a class="nav-link nav-sub dropdown-trigger" href="#" rel="nofollow">Администрация <i class="fa-solid fa-caret-down"></i></a>

                        <ul class="dropdown-list">
                            <li class="dropdown-item">
                                <a class="dropdown-link" rel="nofollow" href="#">Управление</a>
                            </li>

                            <li class="dropdown-item dropdown-submenu">
                                <a class="dropdown-link dropdown-submenu-trigger" href="#">Вход <i class="fa-solid fa-caret-down"></i></a>

                                <ul class="nav-submenu dropdown-list">
                                    <li class="dropdown-item">
                                        <a class="dropdown-link" href="#">Через ВК</a>
                                    </li>

                                    <li class="dropdown-item">
                                        <a class="dropdown-link" href="#">Через Facebook</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
```

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

## Javascript

Панель навигации может работать через Javascript. В этом бывает необходимость, когда требуется управлять состоянием меню на адаптивной верстке (Открытие/закрытие меню)

По умолчанию инициализация происходить автоматически при клике на меню, но это можно сделать и самостоятельн

### Инициализация <a href="#init" id="init"></a>

Для инициализации меню вручную, необходимо создать экземпляр класса PipUI.Navbar. Конструктор данного класса поддерживает 2 параметра: HTMLElement и Object

Первый параметр - объект или строка ссылающаяся на элемент.&#x20;

Второй параметр - объект опций

```html
<div class="navbar" id="navbar">...</div>

<script>
    let navbar = new PipUI.Navbar('#navbar');
</script>
```

### Опции <a href="#options" id="options"></a>

```
// Выводить в консоль отладку
debug: false

// Функция обратного вызова по завершению отображения блока
openCallback: undefined

// Функция обратного вызова по завершению скрытия блока
closeCallback: undefined
```

### Методы <a href="#methods" id="methods"></a>

```javascript
let navbar = new PipUI.Navbar('#navbar');

navbar.getID() // Вернет уникальный идентификатор панели

navbar.setOptions(object) // Изменить опции панели

navbar.getOptions() // Получить опции панели

navbar.hide(callback) // Скрыть панель
// Параметр callback является приоритетной функцией обратного
// вызова при завершении скрытия, если она задана и через опции

navbar.show(callback) // Показать блок
// Параметр callback является приоритетной функцией обратного
// вызова при завершении отображения, если она задана и через опции

navbar.isOpen() // Текущее состояние панели
```

### События

<table><thead><tr><th width="203">Триггер</th><th width="259">Описание</th><th>Инициатор</th></tr></thead><tbody><tr><td>show-navbar-pipui</td><td>Срабатывает при открытии меню на мобильных устройствах</td><td>.navbar</td></tr><tr><td>hide-navbar-pipui</td><td>Срабатывает при закрытии меню на мобильных устройствах</td><td>.navbar</td></tr></tbody></table>