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

## Общая информация <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>

Панель навигации поддерживает выпадающее меню, которое инициализируется автоматически, но при желании можно это сделать и вручную, согласно [документации](https://v2-0-0.pipui.ru/dropdown#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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://v2-0-0.pipui.ru/components/navbar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.