Module «nav-breadcrumbs». Классическая структура хлебных крошек через slash.

Source:

https://html.ildar-meyker.ru/html-kgeu/components.html?tab=tab-navs

Демо:

Плагины:

Подключение:

//

Разметка:

//

<nav class="nav-breadcrumbs">
    <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">Бакалавриат</a></li>
        <li><a href="#">Документы и способы подачи</a></li>
    </ul>
</nav>

Стили:

//

.nav-breadcrumbs {
    ul {
        display: flex;
        flex-wrap: wrap;
    }

    li {
        font-size: 1.8rem;
        color: rgba(255, 255, 255, 0.3);
        display: flex;

        &:last-child {
            color: #fff;

            &::after {
                display: none;
            }

            a {
                cursor: default;
            }
        }

        &:after {
            margin: 0 0.4rem;
            content: "/";
        }
    }

    a {
        &:hover {
            color: #fff;
        }
    }
}

@media (max-width: 999.98px) {
    .nav-breadcrumbs {
        ul {
        }

        li {
            font-size: 1.2rem;

            &:last-child {
                &::after {
                }

                a {
                }
            }

            &:after {
            }
        }

        a {
            &:hover {
            }
        }
    }
}

Инициализация:

//