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

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

<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>

Для добавления подуровней, необходимо добавить к триггеру .nav-menu-link класс .nav-menu-toggle и после этого элемента добавьте список меню, так же как и родительский, только вместо класса .nav-menu используйте класс .nav-sub-menu для всех последующих уровней. Пример можно посмотреть ниже

Пример меню навигации с выпадающим списком

<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>