The Wheels

Vertical Nav

Item ラッパー · aria-current · layout-sidebar デモ

Preview

メイン

リストは素の HTML、項目だけが tw-vertical-nav です。 現在地は slot 内の aria-current="page" で指定します。

山田太郎 · プロダクトマネージャー

HTML

<div class="layout-sidebar">
  <aside class="sidebar">
    <nav aria-label="プロジェクトメニュー">
      <ul>
        <li>
          <tw-vertical-nav>
            <a href="#home" aria-current="page">
              <tw-svg-loader id="…" width="18" height="18"></tw-svg-loader>
              ホーム
            </a>
          </tw-vertical-nav>
        </li>
        <li>
          <tw-vertical-nav>
            <a href="#docs">ドキュメント</a>
          </tw-vertical-nav>
        </li>
        <li>
          <tw-vertical-nav>
            <a href="#settings">設定</a>
          </tw-vertical-nav>
        </li>
      </ul>
    </nav>
  </aside>
  <section>
    <tw-avatar name="山田太郎" width="48" height="48"></tw-avatar>
  </section>
</div>
import "@b4moss/the-wheels";
import menuUrl from "@b4moss/the-wheels-components/assets/menu.svg?url";

const icon = document.querySelector("#nav-home-icon");
if (icon) icon.setAttribute("src", menuUrl);
import "@b4moss/the-wheels";
import menuUrl from "@b4moss/the-wheels-components/assets/menu.svg?url";

const icon = document.querySelector("#nav-home-icon");
if (icon) icon.setAttribute("src", menuUrl);