
        
        <nav class=" menu">
    <ul class="menu__list">
        <li class="menu__item">
            <a class="menu__link" href=""><span>Sit a</span></a>
        </li>
        <li class="menu__item">
            <a class="menu__link" href=""><span>Amet voluptas?</span></a>
        </li>
        <li class="menu__item">
            <a class="menu__link" href=""><span>Sit exercitationem?</span></a>
        </li>
        <li class="menu__item">
            <a class="menu__link" href=""><span>Dolor magni</span></a>
        </li>
    </ul>
</nav>

File:

Content:


                                .menu {
    display: flex;
    flex-flow: column nowrap;

    &__list {
        @include no-bullets;
    }

    &__item {
        margin-bottom: 0;
    }

    &__link {
        margin-bottom: 0;
        display: block;
        padding: $thin-padding;
        transition: color $fade-easing var(--duration-fast), background-color $fade-easing var(--duration-fast);

        &:hover {
            background-color: $blue-100;
            color: $blue-600;
        }
    }
}

URL: /components/raw/menu/menu.scss
Filesystem Path: resources/styles/atoms/menu/menu.scss
Size: 472 Bytes

Menu