diff --git a/app/navbar.tsx b/app/navbar.tsx
index 4b7bc96..4731529 100644
--- a/app/navbar.tsx
+++ b/app/navbar.tsx
@@ -1,6 +1,16 @@
+import { Collapse } from "./utils/bootstrap.client";
 import { Link, NavLink } from "@remix-run/react";
+import { useRef } from "react";
+
+const onItemClick = (nav: HTMLElement | null) => {
+  if (nav !== null) {
+    Collapse.getInstance(nav)?.hide();
+  }
+};
 
 export default function Navbar() {
+  const collapseRef = useRef<HTMLDivElement>(null);
+
   return (
     <nav
       className="navbar navbar-expand-sm bg-dark fixed-top"
@@ -20,18 +30,34 @@ export default function Navbar() {
           <span className="navbar-toggler-icon"></span>
         </button>
 
-        <div id="navbar" className="collapse navbar-collapse">
+        <div id="navbar" className="collapse navbar-collapse" ref={collapseRef}>
           <div className="navbar-nav">
-            <NavLink to="/search/pukiwiki" className="nav-item nav-link">
+            <NavLink
+              to="/search/pukiwiki"
+              className="nav-item nav-link"
+              onClick={() => onItemClick(collapseRef.current)}
+            >
               PukiWiki
             </NavLink>
-            <NavLink to="/search/scrapbox" className="nav-item nav-link">
+            <NavLink
+              to="/search/scrapbox"
+              className="nav-item nav-link"
+              onClick={() => onItemClick(collapseRef.current)}
+            >
               Scrapbox
             </NavLink>
-            <NavLink to="/search/mail" className="nav-item nav-link">
+            <NavLink
+              to="/search/mail"
+              className="nav-item nav-link"
+              onClick={() => onItemClick(collapseRef.current)}
+            >
               Mail
             </NavLink>
-            <NavLink to="/help" className="nav-item nav-link">
+            <NavLink
+              to="/help"
+              className="nav-item nav-link"
+              onClick={() => onItemClick(collapseRef.current)}
+            >
               Help
             </NavLink>
           </div>
diff --git a/app/utils/bootstrap.client.tsx b/app/utils/bootstrap.client.tsx
new file mode 100644
index 0000000..87683d6
--- /dev/null
+++ b/app/utils/bootstrap.client.tsx
@@ -0,0 +1,7 @@
+// Bootstrap のコードは server で評価した瞬間に document がなくエラーになるので、
+// クライアントのみで動かすために client.tsx で import する
+// Note: サーバー側で export したモジュールを使おうとすると undefined になる
+// https://remix.run/docs/en/main/file-conventions/-client
+import { Collapse } from "bootstrap";
+
+export { Collapse };
diff --git a/package-lock.json b/package-lock.json
index 9b6f529..2439c86 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
       "devDependencies": {
         "@remix-run/dev": "^2.4.1",
         "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+        "@types/bootstrap": "^5.2.10",
         "@types/react": "^18.2.20",
         "@types/react-dom": "^18.2.7",
         "@typescript-eslint/eslint-plugin": "^6.7.4",
@@ -1673,7 +1674,6 @@
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
       "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
-      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -2262,6 +2262,15 @@
         "@types/estree": "*"
       }
     },
+    "node_modules/@types/bootstrap": {
+      "version": "5.2.10",
+      "resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-5.2.10.tgz",
+      "integrity": "sha512-F2X+cd6551tep0MvVZ6nM8v7XgGN/twpdNDjqS1TUM7YFNEtQYWk+dKAnH+T1gr6QgCoGMPl487xw/9hXooa2g==",
+      "dev": true,
+      "dependencies": {
+        "@popperjs/core": "^2.9.2"
+      }
+    },
     "node_modules/@types/cookie": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
diff --git a/package.json b/package.json
index 997285b..9d039ec 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
   "devDependencies": {
     "@remix-run/dev": "^2.4.1",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/bootstrap": "^5.2.10",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.7.4",