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

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

HTML

<div class="navbar bg-white"> <div class="navbar-wrapper"> <div class="nav-left"> <a class="nav-brand" href="#">Название</a> <a href="#" class="nav-mobile"><i class="fa-regular fa-bars"></i></a> </div> <div class="nav-center"> <ul class="navbar-menu"> <li class="nav-li"> <a class="nav-link" href="#">Центр #1</a> </li> <li class="nav-li"> <a class="nav-link" href="#">Центр #2</a> </li> </ul> </div> <div class="nav-right"> <ul class="navbar-menu"> <li class="nav-li"> <a class="nav-link active" href="#">Главная</a> </li> <li class="nav-li"> <a class="nav-link nav-sub" href="#">Администрация <i class="fa-solid fa-caret-down"></i></a> <ul class="nav-submenu"> <li> <a class="nav-link" href="#">Управление</a> </li> <li class="nav-li"> <a class="nav-link nav-sub" href="#">Вход <i class="fa-solid fa-caret-down"></i></a> <ul class="nav-submenu"> <li> <a class="nav-link" href="#">Через ВК</a> </li> <li> <a class="nav-link" href="#">Через Facebook</a> </li> </ul> </li> </ul> </li> </ul> </div> </div> </div>

HTML

Вы можете использовать .container внутри блока .navbar, если планируется растягивать navbar под ширину адаптивного контейнера

Для изменения тёмной палитры текста, можно добавить класс .navbar-text-ligth к блоку .navbar