パーツ番号 03-10-04 ・ CSSのみ

アイコン付きダッシュボードサイドバー

各項目にラインアイコンを添えた濃色背景の管理画面向けサイドナビです。WordPressの独自管理画面や会員マイページのメニューデザインに使えます。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-10-04-side">
          <div class="d03-10-04-item is-active">
            <svg viewBox="0 0 20 20" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="2" y="2" width="7" height="7" rx="1.2"/><rect x="11" y="2" width="7" height="7" rx="1.2"/><rect x="2" y="11" width="7" height="7" rx="1.2"/><rect x="11" y="11" width="7" height="7" rx="1.2"/></svg>
            <span>ダッシュボード</span>
          </div>
          <div class="d03-10-04-item">
            <svg viewBox="0 0 20 20" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M3 6h14l-1.5 9h-11z"/><path d="M6 6V4a4 4 0 0 1 8 0v2"/></svg>
            <span>注文管理</span>
          </div>
          <div class="d03-10-04-item">
            <svg viewBox="0 0 20 20" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="10" cy="6" r="3.2"/><path d="M3 17c0-3.6 3-5.6 7-5.6s7 2 7 5.6"/></svg>
            <span>顧客</span>
          </div>
          <div class="d03-10-04-item">
            <svg viewBox="0 0 20 20" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M4 16V9M10 16V4M16 16v-6"/></svg>
            <span>レポート</span>
          </div>
          <div class="d03-10-04-item">
            <svg viewBox="0 0 20 20" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="10" cy="10" r="2.6"/><path d="M10 3v2M10 15v2M17 10h-2M5 10H3M15 5l-1.4 1.4M6.4 13.6 5 15M15 15l-1.4-1.4M6.4 6.4 5 5"/></svg>
            <span>設定</span>
          </div>
        </nav>

CSS

.prev.d03-10-04{padding:0;display:block}
        .d03-10-04-side{
          width:100%;height:100%;min-height:260px;box-sizing:border-box;
          background:#111827;padding:20px 14px;
        }
        .d03-10-04-item{
          display:flex;align-items:center;gap:11px;padding:11px 12px;
          margin-bottom:4px;border-radius:8px;font-size:12.5px;font-weight:600;
          color:#9ca3af;
        }
        .d03-10-04-item svg{flex:none}
        .d03-10-04-item.is-active{background:#2563eb;color:#fff}

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