Regione Toscana Design System Design System Servizi

user-dropdown-servizi: Utente loggato 

<nav class="rtds-user-dropdown" aria-label="Utente" id="userDropdown">

    <div class="rtds-dropdown-menu rtds-user-dropdown__menu has-dropdown-menu rtds-flex-1">
        <button class="rtds-dropdown-menu__trigger rtds-dropdown-trigger rtds-group hover:rtds-underline hover:rtds-content-primary aria-expanded:rtds-bg-white aria-expanded:rtds-content-primary aria-expanded:rtds-relative" aria-expanded="false" aria-controls="userDropdown">
            <svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                <use href="../../icons.svg#mini--user" />
            </svg>
            Mario Rossi<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 rtds-ml-auto rtds-transition-all rtds-dropdown-menu__trigger-icon group-aria-expanded:-rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
                <use href="../../icons.svg#mini--chevron-down" />
            </svg>
        </button>

        <ul class="rtds-dropdown-menu__list rtds-user-dropdown__menu-list rtds-hidden rtds-border rtds-w-full lg:rtds-rounded lg:rtds-shadow-md lg:rtds-absolute" id="userDropdown">

            <li class="rtds-dropdown-menu__item rtds-user-dropdown__menu-item">
                <div class="rtds-user-dropdown__menu-label rtds-items-center">
                    Item label 1
                </div>
                <ul class="rtds-user-dropdown__menu-sublist">

                    <li class="rtds-user-dropdown__menu-label">
                        <a class="rtds-user-dropdown__menu-link" href="">
                            Item label 1
                        </a>
                    </li>

                    <li class="rtds-user-dropdown__menu-label">
                        <a class="rtds-user-dropdown__menu-link" href="">
                            Item label 1
                        </a>
                    </li>

                </ul>
            </li>

            <li class="rtds-dropdown-menu__item rtds-user-dropdown__menu-item">
                <div class="rtds-user-dropdown__menu-label rtds-items-center">
                    Item label 1
                </div>
                <ul class="rtds-user-dropdown__menu-sublist">

                    <li class="rtds-user-dropdown__menu-label">
                        <a class="rtds-user-dropdown__menu-link" href="">
                            Item label 1
                        </a>
                    </li>

                    <li class="rtds-user-dropdown__menu-label">
                        <a class="rtds-user-dropdown__menu-link" href="">
                            Item label 1
                        </a>
                    </li>

                </ul>
            </li>

            <li class="rtds-dropdown-menu__item rtds-user-dropdown__menu-item">
                <a class="rtds-user-dropdown__menu-logout rtds-user-dropdown__menu-link is-logout" href="#">
                    Esci<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 rtds-ml-auto rtds-transition-all rtds-dropdown-menu__trigger-icon group-aria-expanded:-rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
                        <use href="../../icons.svg#solid--arrow-right-start-on-rectangle" />
                    </svg>
                </a>
            </li>

        </ul>

    </div>
</nav>
 
{% extends '@user-dropdown' %}

{% block triggerLabel %}{%- render '@icon--small', {id: 'mini--user', size: 'rtds-w-5 rtds-h-5'}, true -%}{{ userName | default('Username Surname') }}{% endblock %}

{% block loginElement %}<a href="{{ loginHref | default('#') }}" class="rtds-user-dropdown__login-trigger{% if classes %} {{ classes }}{% endif %}">
    {%- render '@icon--small', {id: 'mini--user', size: 'rtds-w-5 rtds-h-5'}, true -%}
    {{ loginLabel | default('Accedi') }}
</a>{% endblock %}
 
{
  "userDropdownId": "userDropdown",
  "userName": "Mario Rossi",
  "loginHref": "#",
  "loginLabel": "Accedi",
  "isUserLoggedIn": true
}

User Dropdown Servizi

Componente per il menu utente nei template-servizi. Gestisce due stati: utente non autenticato (ghost link “Accedi” con icona utente) e utente autenticato (trigger dropdown con icona utente e nome).

Differisce da @user-dropdown (core) in due punti:

  • Non loggato: ghost link <a> con icona, non bottone outlined
  • Loggato: trigger con icona utente visibile a sinistra del nome

Comportamento

  • isUserLoggedIn: false (default) — <a> ghost link con icona mini--user e testo “Accedi”
  • isUserLoggedIn: true — <nav aria-label="Utente"> con trigger <button> che mostra icona utente, nome e chevron-down; apre un dropdown con voci di navigazione e link “Esci”

Varianti

Variante Descrizione
Non loggato (default) Ghost link [ user ] Accedi
Utente loggato Trigger dropdown [ user ] Nome Cognome [ chevron ]

Parametri di configurazione

Parametro Tipo Obbligatorio Descrizione
isUserLoggedIn booleano No Se true renderizza il menu dropdown. Default: false
userName stringa No Nome nel trigger loggato. Default: "Username Surname"
loginHref stringa No Href del ghost link. Default: "#"
loginLabel stringa No Testo del ghost link. Default: "Accedi"
userDropdownId stringa No ID della <ul> dropdown e target di aria-controls. Default: "userDropdown"
classes stringa No Classi CSS aggiuntive sulla radice (<nav> se loggato, <a> se non loggato)
listClasses stringa No Classi CSS aggiuntive sulla <ul> dropdown (solo stato loggato)
triggerLabelColor stringa No Classe colore testo trigger loggato

Accessibilità

  • Non loggato — <a> con testo visibile “Accedi”; l’icona è decorativa (aria-hidden gestito da @icon--small)
  • Loggato — <nav aria-label="Utente"> landmark; trigger <button> con aria-expanded / aria-controls; lista <ul> con <li> e <a>

Stili CSS

Usa le classi BEM definite in 03-molecules/user-dropdown/user-dropdown.css — nessun file CSS separato.

Classe Elemento Descrizione
.rtds-user-dropdown radice <nav> contenitore stato loggato
.rtds-user-dropdown__login-trigger <a> ghost link stato non loggato
.rtds-user-dropdown__menu-list <ul> lista voci dropdown
.rtds-user-dropdown__menu-logout <a> link “Esci”

Esempi di utilizzo

<!-- Stato non autenticato -->
<a href="/accedi" class="rtds-user-dropdown__login-trigger">
  <!-- icona mini--user (iniettata da @icon--small) -->
  Accedi
</a>

<!-- Stato autenticato -->
<nav aria-label="Utente" class="rtds-user-dropdown">
  <div class="rtds-dropdown-menu rtds-user-dropdown__menu has-dropdown-menu">
    <button class="rtds-dropdown-menu__trigger rtds-dropdown-trigger"
            aria-expanded="false"
            aria-controls="userDropdown">
      <!-- icona mini--user -->
      Mario Rossi
      <!-- icona mini--chevron-down -->
    </button>
    <ul id="userDropdown" class="rtds-dropdown-menu__list rtds-user-dropdown__menu-list rtds-hidden">
      <li class="rtds-user-dropdown__menu-item">...</li>
      <li class="rtds-user-dropdown__menu-item">
        <a class="rtds-user-dropdown__menu-logout rtds-user-dropdown__menu-link" href="#">
          Esci
        </a>
      </li>
    </ul>
  </div>
</nav>

Note

  • Usato da @top-bar-servizi (desktop) e @main-heading--logo-square--servizio (mobile)
  • Estende @user-dropdown (Core) tramite extends Nunjucks — struttura ereditata automaticamente, override solo su triggerLabel e loginElement; vedi l’elenco componenti Core in docs/servizi/05-componenti-core.md per il quadro completo delle dipendenze Core→Servizi
  • Limitazione nota: <nav id="userDropdown"> hardcoded — due istanze in DOM (desktop + mobile loggato) producono ID duplicato