パーツ番号 03-13-06 ・ CSSのみ

ラベル付きアイコン縦積みメニュー

アイコンを主役にしつつ下に小さな補助ラベルを添えた縦積みメニューの静止見本です。WordPressのサイドバーウィジェットナビに向いています。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-13-06-nav">
          <a href="#" onclick="return false" class="active">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12l8-8 8 8M6 10v10h12V10"/></svg>
            <span>ホーム</span>
          </a>
          <a href="#" onclick="return false">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M4 9h16"/></svg>
            <span>サービス</span>
          </a>
          <a href="#" onclick="return false">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 5h16v11H8l-4 4V5z"/></svg>
            <span>お問い合わせ</span>
          </a>
        </nav>

CSS

.prev.d03-13-06{padding:0;display:flex;align-items:center;justify-content:flex-start}
        .d03-13-06-nav{
          display:flex;flex-direction:column;gap:4px;
          width:100%;padding:18px 14px;
        }
        .d03-13-06-nav a{
          display:flex;align-items:center;gap:12px;
          padding:10px 12px;border-radius:8px;
          color:#64748b;text-decoration:none;
        }
        .d03-13-06-nav a span{font-size:11px;font-weight:600}
        .d03-13-06-nav a.active{
          background:#eef2ff;color:#4338ca;
        }

クラス名 .d03-13-06 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。