Main Content
Click the toggle button to collapse/expand the sidebar.
How to create a sidebar navigation サイドバーナビの作り方
Collapsible sidebar navigation suitable for admin dashboards. 折りたたみ可能なサイドバーナビゲーション。
ライブデモ Live Demo
概要・用途・特徴Overview, Usage & Features
何ができるかWhat it does
Collapsible sidebar navigation suitable for admin dashboards.
折りたたみ可能なサイドバーナビゲーション。
どこで使うかWhere to use
website header, dashboard sidebar, mobile menu, admin panel
管理ダッシュボード、SaaSアプリ、ドキュメントサイト、CMS
特徴Key features
Collapsible sidebar navigation with icon+label layout. Smooth width transition between expanded and collapsed states. Active link highlighting. Responsive — auto-collapses on mobile. Persists collapsed state in localStorage.
アイコン+ラベルレイアウトの折り畳み可能なサイドバーナビゲーション。展開と折り畳み状態間のスムーズな幅のトランジション。アクティブリンクのハイライト。レスポンシブ — モバイルで自動折り畳み。localStorage に折り畳み状態を保存。
調整可能パラメータ Adjustable Parameters
| Parameter | Default | Description |
|---|---|---|
--sidebar-width | — | Expanded sidebar width |
--sidebar-bg | — | Sidebar background color |
実装コード Implementation Code
// react/N-008.jsx
import { useState } from 'react';
import './N-008.css';
export default function Sidebar() {
const [collapsed, setCollapsed] = useState(false);
return (
<aside className={`sidebar ${collapsed ? 'collapsed' : ''}`}>
<div className="sidebar-header">
<span className="brand-logo">Dashboard</span>
<button className="toggle-btn" onClick={() => setCollapsed(!collapsed)}>
<svg width="20" height="20" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
<path d="M3 12h18M3 6h18M3 18h18"/>
</svg>
</button>
</div>
<ul className="nav-list">
<li><a href="#" className="nav-link"><span className="nav-icon">🏠</span> Home</a></li>
<li><a href="#" className="nav-link"><span className="nav-icon">⚙️</span> Settings</a></li>
</ul>
</aside>
);
}:root { --sidebar-width: 240px; --sidebar-bg: #fff; }
.sidebar { width: var(--sidebar-width); background: var(--sidebar-bg); transition: width 0.3s ease; overflow: hidden; }
.sidebar.collapsed { width: 72px; }
.sidebar.collapsed .brand { opacity: 0; }import { useState } from 'react';
import './N-008.css';
export default function Sidebar({ items = [] }) {
const [collapsed, setCollapsed] = useState(false);
return (
<aside className={`sidebar ${collapsed ? 'collapsed' : ''}`}>
<div className="sidebar-header">
<span className="brand-logo">App</span>
<button className="toggle-btn" onClick={() => setCollapsed(!collapsed)}>
<svg width="20" height="20" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" fill="none">
<path d="M3 12h18M3 6h18M3 18h18" />
</svg>
</button>
</div>
<ul className="nav-list">
{items.map((item, i) => (
<li key={i} className="nav-item">
<a href={item.href || '#'} className="nav-link">
<span className="nav-icon">{item.icon}</span>
<span className="nav-text">{item.label}</span>
</a>
</li>
))}
</ul>
</aside>
);
}/* N-008: React styles */
.sidebar {
width: 240px;
background: #fff;
border-right: 1px solid #e0e4f0;
display: flex;
flex-direction: column;
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
height: 100%;
overflow: hidden;
}
.sidebar.collapsed {
width: 72px;
}
.sidebar-header {
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
border-bottom: 1px solid #e0e4f0;
}
.brand-logo {
font-weight: 700;
color: #5c6ac4;
white-space: nowrap;
opacity: 1;
transition: opacity 0.2s;
}
.sidebar.collapsed .brand-logo {
opacity: 0;
width: 0;
}
.toggle-btn {
background: none;
border: none;
cursor: pointer;
padding: 8px;
color: #5c6184;
display: flex;
align-items: center;
}
.nav-list {
list-style: none;
padding: 16px 12px;
margin: 0;
}
.nav-link {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
text-decoration: none;
color: #5c6184;
border-radius: 8px;
transition: all 0.2s;
white-space: nowrap;
}
.nav-link:hover {
background: #f5f7ff;
color: #1d2242;
}
.nav-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}仕組みとカスタマイズHow It Works & Customization
仕組みHow it works
The sidebar uses a CSS width transition between an expanded value (240px) and a collapsed value (64px). Labels fade out using opacity: 0 and pointer-events: none in collapsed state. A toggle button flips a collapsed class. overflow: hidden on the sidebar prevents content from spilling out during transition.
サイドバーは展開値（240px）と折り畳み値（64px）間のCSS幅トランジションを使用。ラベルは折り畳み状態でopacity:0とpointer-events:noneでフェードアウト。トグルボタンがcollapsedクラスを切り替え。サイドバーのoverflow:hiddenがトランジション中のコンテンツ溢れを防止。
カスタマイズ方法Customization
Add section headings that hide in collapsed mode and show on expand. Use a slide-over overlay pattern on mobile instead of pushing the content. Store the expanded/collapsed preference in localStorage to restore on next visit.
折り畳み時に非表示で展開時に表示されるセクション見出しを追加。モバイルではコンテンツを押し出す代わりにスライドオーバーオーバーレイパターンを使用。次回訪問時に復元するためlocalStorageに展開/折り畳みの設定を保存。
注意点Caveats
In collapsed mode, icon-only navigation requires tooltips or visually hidden text for screen reader users. Use aria-expanded on the toggle button and aria-label on icon-only links. Test keyboard navigation through the sidebar independently from the main content.
折り畳み時のアイコンのみのナビゲーションは、スクリーンリーダーユーザー向けにツールチップまたは視覚的に非表示のテキストが必要です。トグルボタンにaria-expandedを使用し、アイコンのみのリンクにaria-labelを設定してください。サイドバーのキーボードナビゲーションをメインコンテンツから独立してテストしてください。
よくある質問 Frequently Asked Questions
How to customize the sidebar navigation? Sidebar Navigationをカスタマイズするには？
Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.
コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。
How to use the sidebar navigation in React? ReactでSidebar Navigationを使うには？
Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.
提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。
What are the performance implications of sidebar navigation? Sidebar Navigationのパフォーマンスへの影響は？
This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.
この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。
AIへの指示テンプレート AI Prompt Template
以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.