---
# System prepended metadata

title: Bootstrap5 を使用した offcanvas navbar の雛形 2023-05-26
tags: [雛形, Offcanvas, navbar, HTML, CSS, Bootstrap5]

---

---
lang: ja-jp
breaks: true
---
# 参考資料

> Offcanvas navbar
> https://getbootstrap.com/docs/5.2/components/navbar/#offcanvas

> Bootstrap5設置ガイド＞コンポーネント＞ナビゲーションバー
> オフキャンバス（Offcanvas）
> https://bootstrap-guide.com/components/navbar


![](https://hackmd.io/_uploads/HkhfPyCH2.png)

![](https://hackmd.io/_uploads/rky4vJASn.png)


```htmlembedded=
<!doctype html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
          crossorigin="anonymous">
    
    <title>Bootstrap Example</title>
</head>

<body class="p-3 m-0 border-0 bd-example">

    <nav class="navbar navbar-expand-lg bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler"
                    type="button"
                    data-bs-toggle="offcanvas"
                    data-bs-target="#navbarNav"
                    aria-controls="navbarNav"
                    aria-expanded="false"
                    aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="offcanvas offcanvas-end" id="navbarNav" tabindex="-1">

                <div class="offcanvas-header">
                    <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas Header</h5>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="offcanvas"
                            aria-label="Close">
                    </button>
                </div>

                <div class="offcanvas-body">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Features</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Pricing</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled">Disabled</a>
                        </li>
                    </ul>
                </div>

            </div>

        </div>
    </nav>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"
            integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE"
            crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js"
            integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ"
            crossorigin="anonymous">
    </script>

</body>
</html>
```

:::info
【ポイント】
* `navbar-toggler`ボタン→`data-bs-toggle="offcanvas"` を設定。
:::
