サイドバーナビ Sidebar Navigation
画面左側に配置される縦型ナビゲーション。管理画面やドキュメントサイトで定番。
ライブデモ
ソースコード
<div class="demo-sidebar-layout">
<aside class="demo-sidebar">
<div class="demo-sidebar-brand">Admin</div>
<nav class="demo-sidebar-menu">
<a href="#" class="demo-sidebar-link active">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
ダッシュボード
</a>
<a href="#" class="demo-sidebar-link">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4-4v2"/><circle cx="9" cy="7" r="4"/></svg>
ユーザー
</a>
<a href="#" class="demo-sidebar-link">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09"/></svg>
設定
</a>
</nav>
</aside>
<main class="demo-sidebar-main">メインコンテンツ</main>
</div>.demo-sidebar-layout { position: relative; display: flex; border: 1px solid #e5e7eb; border-radius: 8px; overflow: visible; height: 200px; }
.demo-sidebar {
width: 180px; background: #f9fafb; border-right: 1px solid #e5e7eb;
padding: 16px 12px; flex-shrink: 0;
}
.demo-sidebar-brand { font-weight: 700; font-size: 16px; color: var(--ui-primary); margin-bottom: 16px; padding: 0 8px; }
.demo-sidebar-menu { display: flex; flex-direction: column; gap: 2px; }
.demo-sidebar-link {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px; text-decoration: none; color: #555;
border-radius: 6px; font-size: 13px; transition: background 0.2s, color 0.2s;
}
.demo-sidebar-link:hover { background: color-mix(in srgb, var(--ui-primary) 8%, transparent); color: var(--ui-primary); }
.demo-sidebar-link.active {
background: color-mix(in srgb, var(--ui-primary) 12%, transparent);
color: var(--ui-primary); font-weight: 600;
}
.demo-sidebar-main { flex: 1; padding: 20px; font-size: 14px; color: #666; display: flex; align-items: center; justify-content: center; }document.querySelectorAll('.demo-sidebar-link').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
document.querySelectorAll('.demo-sidebar-link').forEach(l => l.classList.remove('active'));
this.classList.add('active');
});
});AIプロンプト
Basic
サイドバーナビゲーションをHTML/CSSで作ってください。左側にメニュー、右側にメインコンテンツのレイアウトです。
Custom
以下の仕様でサイドバーナビゲーションを実装してください。 - アイコン + テキストのメニュー項目 - 折りたたみ可能（アイコンのみ表示モード） - プライマリカラー: #2563eb - アクティブ項目にハイライト背景 - サブメニュー（ネスト）対応 - ヘッダーにロゴとユーザーアバター
Advanced
レスポンシブ対応のサイドバーナビゲーションを実装してください。 - デスクトップ：常時表示（折りたたみ可能） - タブレット：オーバーレイで開閉 - モバイル：ボトムシートまたはドロワー - aria-label, role="navigation" を適切に設定 - キーボードナビゲーション（矢印キーでメニュー移動） - localStorage でサイドバーの開閉状態を保持 - ResizeObserver でブレイクポイントを監視 - アニメーションは transform ベースでパフォーマンス最適化