diff --git a/sites/next.skeleton.dev/src/content/docs/components/navigation/meta.mdx b/sites/next.skeleton.dev/src/content/docs/components/navigation/meta.mdx
new file mode 100644
index 000000000..a8861ef4b
--- /dev/null
+++ b/sites/next.skeleton.dev/src/content/docs/components/navigation/meta.mdx
@@ -0,0 +1,7 @@
+---
+title: Navigation
+description: Provides navigation inerfaces for large, medium, and small screens.
+srcSvelte: '/src/lib/components/Nav'
+srcReact: '/src/lib/components/Nav'
+showDocsUrl: true
+---
diff --git a/sites/next.skeleton.dev/src/content/docs/components/navigation/react.mdx b/sites/next.skeleton.dev/src/content/docs/components/navigation/react.mdx
new file mode 100644
index 000000000..98af19904
--- /dev/null
+++ b/sites/next.skeleton.dev/src/content/docs/components/navigation/react.mdx
@@ -0,0 +1,79 @@
+---
+layout: '@layouts/LayoutDoc.astro'
+---
+
+export const components = componentSet;
+
+import { Page as Example } from '@examples/components/navigation/Example.tsx';
+import ExampleRaw from '@examples/components/navigation/Example.tsx?raw';
+import { Page as ExampleExpanded } from '@examples/components/navigation/ExampleExpanded.tsx';
+import ExampleExpandedRaw from '@examples/components/navigation/ExampleExpanded.tsx?raw';
+import { Page as ExampleBar } from '@examples/components/navigation/ExampleBar.tsx';
+import ExampleBarRaw from '@examples/components/navigation/ExampleBar.tsx?raw';
+import { Page as ExampleTiles } from '@examples/components/navigation/ExampleTiles.tsx';
+import ExampleTilesRaw from '@examples/components/navigation/ExampleTiles.tsx?raw';
+
+import { Navigation } from '@skeletonlabs/skeleton-react/schemas';
+
+## Rail
+
+- Recommended for medium to large screens.
+- Ideal for horizontal screen layouts.
+- Should be fixed to the left or right of the viewport.
+- Supports 3-7 tiles.
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<Example client:load />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleRaw} lang="tsx" />
+	</Fragment>
+</Preview>
+
+### Expanded Mode
+
+Apply the `expanded` property to enable expanded mode. Each tile will resize and used the expanded label.
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<ExampleExpanded client:load />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleExpandedRaw} lang="tsx" />
+	</Fragment>
+</Preview>
+
+## Bar
+
+- Recommended for small screens.
+- Ideal for vertical screen layouts.
+- Should be fixed to the bottom of the viewport.
+- Supports 3-5 tiles.
+- Consider progressive enhancement with the [Virtual Keyboard API](https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard_API).
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<ExampleBar client:load />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleBarRaw} lang="tsx" />
+	</Fragment>
+</Preview>
+
+## Tiles
+
+Tiles are universal between Rails and Bars. They default to buttons, but will convert to anchors when an `href` is provided. When implementing `value` for selection, each item will reflect the active state automatically. If you wish to set this state manually, use the `selected` property.
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<ExampleTiles client:load />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleTilesRaw} lang="tsx" />
+	</Fragment>
+</Preview>
+
+## API Reference
+
+<ApiTable types={['NavCommonProps', 'NavBarProps', 'NavRailProps', 'NavTileProps']} schema={Navigation} />
diff --git a/sites/next.skeleton.dev/src/content/docs/components/navigation/svelte.mdx b/sites/next.skeleton.dev/src/content/docs/components/navigation/svelte.mdx
new file mode 100644
index 000000000..fe13de880
--- /dev/null
+++ b/sites/next.skeleton.dev/src/content/docs/components/navigation/svelte.mdx
@@ -0,0 +1,73 @@
+---
+layout: '@layouts/LayoutDoc.astro'
+---
+
+export const components = componentSet;
+
+import Example from '@examples/components/navigation/Example.svelte';
+import ExampleRaw from '@examples/components/navigation/Example.svelte?raw';
+import ExampleExpanded from '@examples/components/navigation/ExampleExpanded.svelte';
+import ExampleExpandedRaw from '@examples/components/navigation/ExampleExpanded.svelte?raw';
+import ExampleBar from '@examples/components/navigation/ExampleBar.svelte';
+import ExampleBarRaw from '@examples/components/navigation/ExampleBar.svelte?raw';
+import ExampleTiles from '@examples/components/navigation/ExampleTiles.svelte';
+import ExampleTilesRaw from '@examples/components/navigation/ExampleTiles.svelte?raw';
+
+## Rail
+
+- Recommended for medium to large screens.
+- Ideal for horizontal screen layouts.
+- Should be fixed to the left or right of the viewport.
+- Supports 3-7 tiles.
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<Example client:load />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleRaw} lang="svelte" />
+	</Fragment>
+</Preview>
+
+### Expanded Mode
+
+Apply the `expanded` property to enable expanded mode. Each tile will resize and used the expanded label.
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<ExampleExpanded client:load />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleExpandedRaw} lang="svelte" />
+	</Fragment>
+</Preview>
+
+## Bar
+
+- Recommended for small screens.
+- Ideal for vertical screen layouts.
+- Should be fixed to the bottom of the viewport.
+- Supports 3-5 tiles.
+- Consider progressive enhancement with the [Virtual Keyboard API](https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard_API).
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<ExampleBar client:load />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleBarRaw} lang="svelte" />
+	</Fragment>
+</Preview>
+
+## Tiles
+
+Tiles are universal between Rails and Bars. They default to buttons, but will convert to anchors when an `href` is provided. When implementing `value` for selection, each item will reflect the active state automatically. If you wish to set this state manually, use the `selected` property.
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<ExampleTiles client:load />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleTilesRaw} lang="svelte" />
+	</Fragment>
+</Preview>