diff --git a/docs/src/components/ConfigTabs/index.jsx b/docs/src/components/ConfigTabs/index.jsx
new file mode 100644
index 000000000..cf076989d
--- /dev/null
+++ b/docs/src/components/ConfigTabs/index.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+export default function ConfigTabs({ children }) {
+  return (
+    <Tabs
+      groupId="config-method"
+      defaultValue="ui"
+      values={[
+        { label: "Frigate UI", value: "ui" },
+        { label: "YAML", value: "yaml" },
+      ]}
+    >
+      {children}
+    </Tabs>
+  );
+}
diff --git a/docs/src/components/NavPath/index.jsx b/docs/src/components/NavPath/index.jsx
new file mode 100644
index 000000000..8ba71d514
--- /dev/null
+++ b/docs/src/components/NavPath/index.jsx
@@ -0,0 +1,30 @@
+import React from "react";
+
+export default function NavPath({ path }) {
+  const segments = path.split(" > ");
+  return (
+    <span
+      style={{
+        display: "inline",
+        fontSize: "inherit",
+        lineHeight: "inherit",
+      }}
+    >
+      {segments.map((seg, i) => (
+        <span key={i}>
+          {i > 0 && (
+            <span
+              style={{
+                margin: "0 4px",
+                color: "var(--ifm-color-emphasis-500)",
+              }}
+            >
+              ›
+            </span>
+          )}
+          <strong>{seg}</strong>
+        </span>
+      ))}
+    </span>
+  );
+}