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

Общая информация

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

Простое меню

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

Пример работы кода выше

Многоуровневое меню

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

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

Пример работы кода выше

Меню под спойлером

Вы так же можете использовать данное меню вместе со спойлерами.

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

Иконки

Если есть необходимость добавить иконки, Вы можете добавить блок .link-icon внутрь блока .nav-menu-link с вашей иконкой или текстом