User Menu

Styles for a user menu used in user_menu module.

Structurally .user-menu contains following elements:

• .user-menu__user
• .user-menu__user-icon
• .user-menu__user-text
• .user-menu__link

And following class modifiers:

• .user-menu__user-text_secondary
• .user-menu__link_secondary

Example

Here is an example of user menu element usage from the user_menu module.

HTML

    <h-dropdown name="dropdown-account" direction="bottom-right" slot="logged-in" hidden>
        <h-dropdown-toggler class="user-menu" name="dropdown-account">
            <div class="labeled-icon">
                <svg class="icon labeled-icon__icon">
                    <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-user"></use>
                </svg>
                <div class="labeled-icon__signature">Account</div>
            </div>
        </h-dropdown-toggler>

        <h-dropdown-content name="dropdown-account">
            <div class="user-menu__user">
                <div class="user-menu__user-icon">
                    E
                </div>
                <div>
                    <p class="p_no-margin user-menu__user-text">
                        Hello,
                    </p>
                    <p class="user-menu__user-text user-menu__user-text_secondary">
                        email@example.com
                    </p>
                </div>
            </div>

            <hr class="separator separator_s">

            <div class="list">
                <ul class="list__content list__content_unordered">
                    <li class="list__item list__item_secondary">
                        <a class="user-menu__link" href="link/to/orders">
                            Your orders
                        </a>
                    </li>
                    <li class="list__item list__item_secondary">
                        <a class="user-menu__link" href="link/to/settings">
                            Account settings
                        </a>
                    </li>
                    <li class="list__item list__item_secondary">
                        <a class="user-menu__link" href="link/to/addresses">
                            Your addresses
                        </a>
                    </li>

                    <li class="list__item list__item_secondary">
                        <logout-btn class="user-menu__link user-menu__link_secondary">
                            Log out
                        </logout-btn>
                    </li>
                </ul>
            </div>
        </h-dropdown-content>
    </h-dropdown>

User Menu tags

The .user-menu classes were designed to be used with block elements like <div>. However, you can use them with any other element and customize it to your own needs.

LESS

You can modify any user menu less variable in your User Less section to change user menu styles.

User Menu variables

Variables used to style a user menu.

@userMenuUserGapInPx: 12;

@userMenuUserIconSizeInPx: 48;
@userMenuUserIconBgColor: @neutralColors200;
@userMenuUserIconColor: @neutralColors500;
@userMenuUserIconFontSizeInPx: @fontSizeInPxXl;
@userMenuUserIconFontWeight: @fontWeightSemibold;
@userMenuUserIconBorderRadius: 100%;

@userMenuUserTextFontSizeInPx: @fontSizeInPxS;
@userMenuUserTextLineHeightInPx: @lineHeightInPxS;

@userMenuUserTextSecondaryFontWeight: @fontWeightSemibold;

@userMenuListGap: @globalSpacing * 0.5;

@userMenuLinkColor: @globalFontColor;
@userMenuLinkTextDecoration: none;
@userMenuLinkFontSizeInPx: @fontSizeInPxS;
@userMenuLinkLineHeightInPx: @lineHeightInPxS;

@userMenuLinkColorHover: @globalFontColor;
@userMenuLinkTextDecorationHover: underline;

@userMenuLinkColorSecondary: @primaryColor;

@userMenuLinkColorSecondaryHover: darken(@userMenuLinkColorSecondary, 14.5%);

If you want to change user menu styles, you can just change the variables. To change a default color of user menu links just modify @userMenuLinkColor variable.

@userMenuLinkColor: red;

User Menu styles

Here are standard user menu styles.

.user-menu {
    &__close {
        display: flex;
        justify-content: flex-end;
    }

    &__user {
        display: flex;
        align-items: center;
        .pixel-to-rem(gap, @userMenuUserGapInPx);

        &-icon {
            .pixel-to-rem(width, @userMenuUserIconSizeInPx);
            .pixel-to-rem(height, @userMenuUserIconSizeInPx);

            display: flex;
            align-items: center;
            justify-content: center;

            background-color: @userMenuUserIconBgColor;
            border-radius: @userMenuUserIconBorderRadius;

            color: @userMenuUserIconColor;
            .font-size(@userMenuUserIconFontSizeInPx);
            font-weight: @userMenuUserIconFontWeight;
        }

        &-text {
            .font-size(@userMenuUserTextFontSizeInPx);
            .line-height(@userMenuUserTextLineHeightInPx);

            &_secondary {
                font-weight: @userMenuUserTextSecondaryFontWeight;
            }
        }
    }

    &__list-content {
        display: flex;
        flex-direction: column;
        gap: @userMenuListGap;
    }

    &__link {
        .font-size(@userMenuLinkFontSizeInPx);
        .line-height(@userMenuLinkLineHeightInPx);
        cursor: pointer;
        color: @userMenuLinkColor;
        text-decoration: @userMenuLinkTextDecoration;

        &:hover {
            color: @userMenuLinkColorHover;
            text-decoration: @userMenuLinkTextDecorationHover;

            .user-menu__user-text{
                text-decoration: @userMenuLinkTextDecorationHover;
            }
        }

        &_no-underline {
            &:hover {
                text-decoration: none;
            }
        }

        &_secondary {
            color: @userMenuLinkColorSecondary;

            &:hover {
                color: @userMenuLinkColorSecondaryHover;
            }
        }
    }
}

Modules reference

• user_menu