# Bootstrap 5で作るレスポンシブ対応ヘッダーメニューバー
> Bootstrap 5で簡単にレスポンシブ対応のヘッダーメニューバーを作成するメモ
- Canonical: https://c-a-p-engineer.github.io/bootstrap-5-slide-in-menu-tutorial/
- Published: 2024-07-16T03:50:00.000Z
- Modified: 2024-07-16T03:50:00.000Z
- Categories: AWS, Web
- Tags: AWS, Web
Bootstrap 5で簡単にレスポンシブ対応のヘッダーメニューバーを作成するメモ
## サンプルコード
実現するためのサンプルコードです。
```html
Bootstrap demo
```
## コード解説
- **Navbar構造**:
- `navbar-expand-lg`クラスにより、画面幅が大きい場合は通常のナビゲーションバーとして機能します。
- `navbar-toggler`ボタンがクリックされると、ナビゲーションバーが折りたたまれた状態から展開されます。
- `collapse navbar-collapse`クラスにより、画面幅が広い場合はメニューが通常のナビゲーションバーとして表示されます。
## 参考
- Navbar Bootstrap 5