--- 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"` を設定。 :::