HTML + CSSNavigation
Menu du compte
L'avatar ouvre un menu avec tes informations, des raccourcis, un interrupteur de thème et la déconnexion.
Réglages
16px
1x
Code
<div class="uv-nac"><button type="button" class="av" aria-haspopup="menu" aria-expanded="false" aria-controls="uv-nac-m" aria-label="Compte"><span>LM</span><i></i></button><div class="mn" id="uv-nac-m" role="menu"><div class="hd"><span class="ph" aria-hidden="true">LM</span><span><b>Lucía Martín</b><small>lucia@estudio.com</small></span></div><a href="#" role="menuitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8.5" r="3.8"/><path d="M4.5 20c.8-3.8 3.9-6 7.5-6s6.7 2.2 7.5 6"/></svg>Profil</a><a href="#" role="menuitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-1.8-.3 1.6 1.6 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.6 1.6 0 0 0-1-1.5 1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0 .3-1.8 1.6 1.6 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.6 1.6 0 0 0 1.5-1 1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.6 1.6 0 0 0 1.8.3H9a1.6 1.6 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.6 1.6 0 0 0 1 1.5 1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8V9a1.6 1.6 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z"/></svg>Réglages</a><label class="th" role="menuitemcheckbox" aria-checked="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19.5 14.5A7.5 7.5 0 0 1 9.5 4.5a7.5 7.5 0 1 0 10 10z"/></svg>Mode sombre<input type="checkbox" tabindex="-1"><i></i></label><hr><a href="#" role="menuitem" class="ex"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 12H4M8 8l-4 4 4 4M13 4.5h5a1.5 1.5 0 0 1 1.5 1.5v12a1.5 1.5 0 0 1-1.5 1.5h-5"/></svg>Se déconnecter</a></div></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Navigation
Voir tout : NavigationOù l’utiliser
Presque toutes les applis web ont un avatar dans le coin qui ouvre le menu du compte. Celui-ci grandit depuis l'avatar avec ton nom et ton e-mail en haut, des liens vers le profil et les réglages, un interrupteur de mode sombre qui bascule sans fermer le menu, un séparateur et la déconnexion en rouge à la fin.
Les flèches parcourent les options, Échap ferme le menu en rendant le focus à l'avatar, et l'interrupteur est exposé comme menuitemcheckbox. Les deux couleurs forment le dégradé de l'avatar.