Module «nav-tags».

Source:

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

Демо:

Плагины:

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

//

Разметка:

//

<nav class="nav-tags">
    <ul>
        <li class="active">
            <a href="#">Все</a>
        </li>

        <li>
            <a href="#">Мероприятия</a>
        </li>

        <li>
            <a href="#">Продукты</a>
        </li>

        <li>
            <a href="#">Партнеры</a>
        </li>
    </ul>
</nav>

Стили:

//
.nav-tags {
    ul {
        display: flex;
        gap: 1.5rem;
    }

    li {
        &.active {
            a {
                background: #fff;
                color: #0e0e0e;
            }
        }
    }

    a {
        display: block;
        border: 1px solid #ffffff;
        padding: 0.9rem;
        font-size: 1.3rem;
        font-weight: 500;
        line-height: calc(14 / 13);
        letter-spacing: 0px;
        text-transform: uppercase;
        color: #fff;

        &:hover {
            background: #fff;
            color: #0e0e0e;
        }
    }
}

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

//