Docs: add guide for replacing navbar

apps/docs/content/docs/ui/blocks/layout.mdx

@@ -120,7 +120,7 @@ You can consider:
 
 ## Notebook
 
-Enable the notebook layout with `fumadocs-ui/layouts/notebook`.
+Enable the notebook layout with `fumadocs-ui/layouts/notebook`, it's a more compact layout than the default one.
 
 ![Notebook](/docs/notebook.png)
 
@@ -138,6 +138,40 @@ export default function Layout({ children }: { children: ReactNode }) {
 }
 ```
 
+### Replacing Navbar
+
+Fumadocs uses CSS Variables to share the size of layout components, and fit each layout component into appropriate position.
+
+To replace the navbar in Docs Layout, set `nav.component` to your own component.
+
+```tsx title="layout.tsx"
+import { DocsLayout } from 'fumadocs-ui/layouts/notebook';
+import type { ReactNode } from 'react';
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <DocsLayout
+      // other options
+      nav={{
+        component: <CustomNavbar />,
+      }}
+    >
+      {children}
+    </DocsLayout>
+  );
+}
+```
+
+You need to override `--fd-nav-height` to the exact height of your custom navbar, this can be done with a CSS stylesheet (e.g. in `global.css`):
+
+```css
+:root {
+  --fd-nav-height: 80px !important;
+}
+```
+
+Note that `!important` is required to override CSS variables.
+
 ## References
 
 ### Sidebar