There are no notes for this item.

<div class='c-user-account'>
    <nav id='user-account-navigation' class='c-user-account__nav js-has-toggler' role='navigation'>
        <button class="js-toggle c-button--icon c-user-account__js-toggle" aria-expanded="false" aria-controls="user-account-menu">

            <span class='u-photo c-headshot c-user-account__headshot'>

                <img class='c-headshot__image' src='/images/portrait.jpg' alt='' />

            </span>

        </button>
        <ul id="user-account-menu" class="c-menu c-menu--toc">

            <li class="c-menu__item  c-menu__item--current   ">
                <a class="c-menu__item__link  c-menu__item--current__link " href=''>My account</a>

            </li>

            <li class="c-menu__item   ">
                <a class="c-menu__item__link " href=''>Log out</a>

            </li>

        </ul>

    </nav>
</div>
<div class='{{ get_component_class( 'user-account', display ) }}'>
    <nav id='user-account-navigation' class='c-user-account__nav js-has-toggler' role='navigation'>
        <button class="js-toggle c-button--icon c-user-account__js-toggle" aria-expanded="false" aria-controls="user-account-menu">
            {% if headshot %}
                {% include '@unit/headshot/headshot.twig' with headshot %}
            {% else %}
                {% include '@unit/avatar/avatar.twig' with avatar %}
            {% endif %}
        </button>
        {% include '@unit/menu/menu.twig' with menu %}
    </nav>
</div>
{
  "headshot": {
    "display": {
      "component": "user-account"
    },
    "src": "/images/portrait.jpg"
  },
  "menu": {
    "id": "user-account-menu",
    "display": {
      "modifiers": [
        "toc"
      ]
    },
    "items": [
      {
        "title": "My account",
        "in_active_trail": true
      },
      {
        "title": "Log out"
      }
    ]
  }
}