The Wheels

UserMenu

Avatar＋名前 trigger · Dropdown 合成 · data-tw-user-menu-item

Preview

基本

プロフィール 設定

placement=top-end

アカウント 請求

HTML

<tw-user-menu>
  <button type="button" slot="trigger" class="user-menu-trigger">
    <tw-avatar name="山田太郎" width="32" height="32"></tw-avatar>
    <span>山田太郎</span>
  </button>
  <a data-tw-user-menu-item href="#profile">プロフィール</a>
  <a data-tw-user-menu-item href="#settings">設定</a>
  <button type="button" data-tw-user-menu-item>ログアウト</button>
</tw-user-menu>
import "@b4moss/the-wheels";
import "@b4moss/the-wheels";