Repository: skeletonlabs/skeleton
Pull request #3330: Navigation Component Examples Reworked
Author: login: endigo9740
Created: 2025-03-06T22:05:44Z | Merged: 2025-03-07T00:06:47Z

## Linked Issue

Closes #3198

## Description

Updates both the React and Svelte documentation examples for the navigation component to better showcase usage examples. This includes the following:

- Navigation Rail - splits examples between Selection and Routing use cases
- Navigation Rail expanded example now animates between state changes
- Navigation Bar - splits examples between Selection and Routing use cases
- Navigation Tile now covers `href` selection state using URL paths and `selected` prop

## Checklist

Please read and apply all [contribution requirements](https://skeleton.dev/docs/resources/contribute/).

- [x] Your branch should be prefixed with: `docs/`, `feature/`, `chore/`, `bugfix/`
- [x] Skeleton v3 contributions must target the `next` branch (NEVER `dev` or `master`)
- [x] Documentation should be updated to describe all relevant changes
- [x] Run `pnpm check` in the root of the monorepo
- [x] Run `pnpm format` in the root of the monorepo
- [x] Run `pnpm lint` in the root of the monorepo
- [x] Run `pnpm test` in the root of the monorepo
- [x] If you modify `/package` projects, please supply a Changeset

## Changsets

[View our documentation](https://skeleton.dev/docs/resources/contribute/get-started#changesets) to learn more about [Changesets](https://github.com/changesets/changesets). To create a Changeset:

1. Navigate to the root of the monorepo in your terminal
2. Run `pnpm changeset` and follow the prompts
3. Commit and push the changeset before flagging your PR review for review.


Linked issue #3198: Skeleton V3 Navigation.Rail/Tile selection not updated correctly
### Current Behavior

Since I cannot reopen, I'm submitting again,
Function runs on each tap. You can close it again, if you insist it's a feature.

### Expected Behavior

Skeleton V3 Navigation.Rail/Tile selection not updated correctly #3197


### Steps To Reproduce

_No response_

### Link to Reproduction / Stackblitz

_No response_

### More Information

_No response_
Linked issue comments: user: login: ktarmyshov
created_at: 2025-02-07T15:38:42Z
body: <img width="1726" alt="Image" src="https://github.com/user-attachments/assets/d14ecc4b-6d7c-4131-becd-d8d60b6ccf26" />

Manual span with background
```js
<script lang="ts">
	import { Navigation } from '@skeletonlabs/skeleton-svelte';
	// Icons
	import IconFolder from 'lucide-svelte/icons/folder';
	import IconImage from 'lucide-svelte/icons/image';
	import IconMusic from 'lucide-svelte/icons/music';
	import IconSettings from 'lucide-svelte/icons/settings';
	import IconVideo from 'lucide-svelte/icons/video';

	let hrefExample = '#';

	import { page } from '$app/state';
	import '../app.css';
	let { children } = $props();

	function isRouteSelected(route: string) {
		console.log('I ran', page.url.pathname, route);
		return page.url.pathname?.startsWith(route);
	}
</script>

<a href="/route1" class="anchor">App Bar Main Route</a>
<div class="card grid h-[640px] w-full grid-cols-[auto_1fr] border-[1px] border-surface-100-900">
	<!-- Component -->
	<Navigation.Rail>
		{#snippet tiles()}
			<span class={isRouteSelected('/route1') ? 'bg-primary-500' : ''}> active </span>
			<Navigation.Tile id="0" label="Files" href={'/route1'} selected={isRouteSelected('/route1')}>
				<IconFolder />
			</Navigation.Tile>
			<span class={isRouteSelected('/route2') ? 'bg-primary-500' : ''}> active </span>
			<Navigation.Tile id="1" label="Images" href={'/route2'} selected={isRouteSelected('/route2')}>
				<IconImage />
			</Navigation.Tile>
			<span class={isRouteSelected('/route3') ? 'bg-primary-500' : ''}> active </span>
			<Navigation.Tile id="2" label="Music" href={'/route3'} selected={isRouteSelected('/route3')}>
				<IconMusic />
			</Navigation.Tile>
			<span class={isRouteSelected('/route4') ? 'bg-primary-500' : ''}> active </span>
			<Navigation.Tile id="3" label="Videos" href={'/route4'} selected={isRouteSelected('/route4')}>
				<IconVideo />
			</Navigation.Tile>
		{/snippet}
		{#snippet footer()}
			<Navigation.Tile labelExpanded="Settings" href="/settings" title="settings"
				><IconSettings /></Navigation.Tile
			>
		{/snippet}
	</Navigation.Rail>
	<!-- Content -->
	<div class="flex items-center justify-center">
		<p class="opacity-20">(Content)</p>
	</div>
</div>

{@render children()}
```
author_association: NONE
user: login: endigo9740
created_at: 2025-02-07T16:15:03Z
body: [As I stated before](https://github.com/skeletonlabs/skeleton/issues/3197#issuecomment-2643276110), this is a different bug than originally reported in #3197, so it will be treated as such can can remain.

The original bug was in regards to why selection state didn't change when navigating outside the component.

This is in regards to why the function for `selected` is running multiple times.

The first issue was addressed in the prior ticket, we'll address the second here.
author_association: CONTRIBUTOR
user: login: phamduylong
created_at: 2025-02-17T20:38:14Z
body: This is broken due to `ctx` not handling external navigation (so navigation happening outside of the component). The `value` property of `ctx` doesn't change when navigation was done outside the component.

@ktarmyshov A temporary fix for this could just be removing the Navigation.Tile `id` completely for each of them. Something like this should work:

```svelte
<Navigation.Rail>
{#snippet tiles()}
  <Navigation.Tile label="Files" href={'/route1'} selected={page.url.pathname.startsWith('/route1')}>
    <IconFolder />
  </Navigation.Tile>
  <Navigation.Tile label="Images" href={'/route2'} selected={page.url.pathname.startsWith('/route2')}>
    <IconImage />
  </Navigation.Tile>
  <Navigation.Tile label="Music" href={'/route3'} selected={page.url.pathname.startsWith('/route3')}>
    <IconMusic />
  </Navigation.Tile>
  <Navigation.Tile label="Videos" href={'/route4'} selected={page.url.pathname.startsWith('/route4')}>
    <IconVideo />
  </Navigation.Tile>
{/snippet}
</Navigation.Rail>
```
author_association: CONTRIBUTOR
user: login: endigo9740
created_at: 2025-03-06T22:15:51Z
body: So @phamduylong was correct, this was a bug due to misconfiguration of the props. You should never mix `id` and `href`. Those are used for selection and routing states respectively. To address this, I've updated the documentation to showcase either use case separate from one another.

https://skeleton-next-git-docs-improve-navigation-0f3bc1-skeleton-labs.vercel.app/docs/components/navigation/svelte

This should provide much more specific examples, with less inference required.
author_association: CONTRIBUTOR

Diff:
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
index a3e84a3096..d6694aed56 100644
--- a/sites/next.skeleton.dev/src/content/docs/components/navigation/react.mdx
+++ b/sites/next.skeleton.dev/src/content/docs/components/navigation/react.mdx
@@ -4,41 +4,69 @@ 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 ExampleRail } from '@examples/components/navigation/ExampleRail';
+import ExampleRailRaw from '@examples/components/navigation/ExampleRail.tsx?raw';
+
+import { Page as ExampleRailRouting } from '@examples/components/navigation/ExampleRailRouting';
+import ExampleRailRoutingRaw from '@examples/components/navigation/ExampleRailRouting.tsx?raw';
+
+import { Page as ExampleRailExpanded } from '@examples/components/navigation/ExampleRailExpanded.tsx';
+import ExampleRailExpandedRaw from '@examples/components/navigation/ExampleRailExpanded.tsx?raw';
+
 import { Page as ExampleBar } from '@examples/components/navigation/ExampleBar.tsx';
 import ExampleBarRaw from '@examples/components/navigation/ExampleBar.tsx?raw';
+
+import { Page as ExampleBarRouting } from '@examples/components/navigation/ExampleBarRouting.tsx';
+import ExampleBarRoutingRaw from '@examples/components/navigation/ExampleBarRouting.tsx?raw';
+
 import { Page as ExampleTiles } from '@examples/components/navigation/ExampleTiles.tsx';
 import ExampleTilesRaw from '@examples/components/navigation/ExampleTiles.tsx?raw';
 
+import ExampleTilesSelectionRaw from '@examples/components/navigation/ExampleTilesSelectionReact.txt?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.
+- Supports 3-7 tiles based on viewport height.
+
+### Selection
+
+Define a `value` state on the Rail. This is updated to match each Tile `id` when presssed.
 
 <Preview client:load>
 	<Fragment slot="preview">
-		<Example client:visible />
+		<ExampleRail client:visible />
 	</Fragment>
 	<Fragment slot="code">
-		<Code code={ExampleRaw} lang="tsx" />
+		<Code code={ExampleRailRaw} lang="tsx" />
+	</Fragment>
+</Preview>
+
+### Routing
+
+Replace Tile `id` with `href` to convert each to a anchor link.
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<ExampleRailRouting client:visible />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleRailRoutingRaw} lang="tsx" />
 	</Fragment>
 </Preview>
 
 ### Expanded Mode
 
-Apply the `expanded` property to enable expanded mode. Each tile will resize and used the expanded label.
+Apply the `expanded` property to enable an expanded mode. Each tile will resize and used the expanded label.
 
 <Preview client:load>
 	<Fragment slot="preview">
-		<ExampleExpanded client:visible />
+		<ExampleRailExpanded client:visible />
 	</Fragment>
 	<Fragment slot="code">
-		<Code code={ExampleExpandedRaw} lang="tsx" />
+		<Code code={ExampleRailExpandedRaw} lang="tsx" />
 	</Fragment>
 </Preview>
 
@@ -47,9 +75,13 @@ Apply the `expanded` property to enable expanded mode. Each tile will resize and
 - Recommended for small screens.
 - Ideal for vertical screen layouts.
 - Should be fixed to the bottom of the viewport.
-- Supports 3-5 tiles.
+- Supports 3-5 tiles based on viewport width.
 - Consider progressive enhancement with the [Virtual Keyboard API](https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard_API).
 
+### Selection
+
+Define a `value` state on the Bar. This is updated to match each Tile `id` when presssed.
+
 <Preview client:load>
 	<Fragment slot="preview">
 		<ExampleBar client:visible />
@@ -59,9 +91,22 @@ Apply the `expanded` property to enable expanded mode. Each tile will resize and
 	</Fragment>
 </Preview>
 
+## Routing
+
+Replace Tile `id` with `href` to convert each to a anchor link.
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<ExampleBarRouting client:visible />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleBarRoutingRaw} 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.
+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 update the value when clicked.
 
 <Preview client:load>
 	<Fragment slot="preview">
@@ -72,6 +117,12 @@ Tiles are universal between Rails and Bars. They default to buttons, but will co
 	</Fragment>
 </Preview>
 
+### Anchor Tile Selection
+
+When using anchor Tiles, use the `selected` prop to highlight the active tile. Use `window.location.href` to compare page pathname and tile URLs.
+
+<Code code={ExampleTilesSelectionRaw} lang="tsx" />
+
 ## Anatomy
 
 ### Rail
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
index be4d3da112..ed12c0f066 100644
--- a/sites/next.skeleton.dev/src/content/docs/components/navigation/svelte.mdx
+++ b/sites/next.skeleton.dev/src/content/docs/components/navigation/svelte.mdx
@@ -4,41 +4,63 @@ 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 ExampleRail from '@examples/components/navigation/ExampleRail.svelte';
+import ExampleRailRaw from '@examples/components/navigation/ExampleRail.svelte?raw';
+import ExampleRailRouting from '@examples/components/navigation/ExampleRailRouting.svelte';
+import ExampleRailRoutingRaw from '@examples/components/navigation/ExampleRailRouting.svelte?raw';
+import ExampleRailExpanded from '@examples/components/navigation/ExampleRailExpanded.svelte';
+import ExampleRailExpandedRaw from '@examples/components/navigation/ExampleRailExpanded.svelte?raw';
 import ExampleBar from '@examples/components/navigation/ExampleBar.svelte';
 import ExampleBarRaw from '@examples/components/navigation/ExampleBar.svelte?raw';
+import ExampleBarRouting from '@examples/components/navigation/ExampleBarRouting.svelte';
+import ExampleBarRoutingRaw from '@examples/components/navigation/ExampleBarRouting.svelte?raw';
 import ExampleTiles from '@examples/components/navigation/ExampleTiles.svelte';
 import ExampleTilesRaw from '@examples/components/navigation/ExampleTiles.svelte?raw';
+import ExampleTilesSelectionRaw from '@examples/components/navigation/ExampleTilesSelectionSvelte.txt?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.
+- Supports 3-7 tiles based on viewport height.
+
+### Selection
+
+Define a `value` state on the Rail. This is updated to match each Tile `id` when presssed.
 
 <Preview client:load>
 	<Fragment slot="preview">
-		<Example client:visible />
+		<ExampleRail client:visible />
 	</Fragment>
 	<Fragment slot="code">
-		<Code code={ExampleRaw} lang="svelte" />
+		<Code code={ExampleRailRaw} lang="svelte" />
 	</Fragment>
 </Preview>
 
-### Expanded Mode
+### Routing
 
-Apply the `expanded` property to enable expanded mode. Each tile will resize and used the expanded label.
+Replace Tile `id` with `href` to convert each to a anchor link.
 
 <Preview client:load>
 	<Fragment slot="preview">
-		<ExampleExpanded client:visible />
+		<ExampleRailRouting client:visible />
 	</Fragment>
 	<Fragment slot="code">
-		<Code code={ExampleExpandedRaw} lang="svelte" />
+		<Code code={ExampleRailRoutingRaw} lang="svelte" />
+	</Fragment>
+</Preview>
+
+### Expanded
+
+Apply the `expanded` property to enable an expanded mode. Each tile will resize and used the expanded label.
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<ExampleRailExpanded client:visible />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleRailExpandedRaw} lang="svelte" />
 	</Fragment>
 </Preview>
 
@@ -47,9 +69,13 @@ Apply the `expanded` property to enable expanded mode. Each tile will resize and
 - Recommended for small screens.
 - Ideal for vertical screen layouts.
 - Should be fixed to the bottom of the viewport.
-- Supports 3-5 tiles.
+- Supports 3-5 tiles based on viewport width.
 - Consider progressive enhancement with the [Virtual Keyboard API](https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard_API).
 
+### Selection
+
+Define a `value` state on the Bar. This is updated to match each Tile `id` when presssed.
+
 <Preview client:load>
 	<Fragment slot="preview">
 		<ExampleBar client:visible />
@@ -59,9 +85,22 @@ Apply the `expanded` property to enable expanded mode. Each tile will resize and
 	</Fragment>
 </Preview>
 
+### Routing
+
+Replace Tile `id` with `href` to convert each to a anchor link.
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<ExampleBarRouting client:visible />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleBarRoutingRaw} 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.
+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 update the value when clicked.
 
 <Preview client:load>
 	<Fragment slot="preview">
@@ -72,6 +111,12 @@ Tiles are universal between Rails and Bars. They default to buttons, but will co
 	</Fragment>
 </Preview>
 
+### Anchor Tile Selection
+
+When using anchor Tiles, use the `selected` prop to highlight the active tile. For SvelteKit, this can be achieved using the `page` state and comparing the page pathname and tile URLs.
+
+<Code code={ExampleTilesSelectionRaw} lang="svelte" />
+
 ## Anatomy
 
 ### Rail
diff --git a/sites/next.skeleton.dev/src/examples/components/navigation/ExampleBar.svelte b/sites/next.skeleton.dev/src/examples/components/navigation/ExampleBar.svelte
index ea981af66e..607a7c05af 100644
--- a/sites/next.skeleton.dev/src/examples/components/navigation/ExampleBar.svelte
+++ b/sites/next.skeleton.dev/src/examples/components/navigation/ExampleBar.svelte
@@ -1,33 +1,25 @@
 <script lang="ts">
 	import { Navigation } from '@skeletonlabs/skeleton-svelte';
+	// Icons
 	import IconFolder from 'lucide-svelte/icons/folder';
 	import IconImage from 'lucide-svelte/icons/image';
 	import IconMusic from 'lucide-svelte/icons/music';
 	import IconVideo from 'lucide-svelte/icons/video';
 
-	// You may optionally bind a selected state value
-	// Pass the ID item you wish to be selected by default.
-	let value = $state('0');
+	// State
+	let value = $state('files');
 </script>
 
 <div class="card border-surface-100-900 grid h-[512px] w-[320px] grid-rows-[1fr_auto] border-[1px]">
 	<!-- Content -->
 	<div class="flex items-center justify-center">
-		<p class="opacity-20">(Content)</p>
+		<pre class="pre">value: {value}</pre>
 	</div>
 	<!-- Component -->
-	<Navigation.Bar {value} onValueChange={(_value) => (value = _value)}>
-		<Navigation.Tile id="0" label="Files">
-			<IconFolder />
-		</Navigation.Tile>
-		<Navigation.Tile id="1" label="Images">
-			<IconImage />
-		</Navigation.Tile>
-		<Navigation.Tile id="2" label="Music">
-			<IconMusic />
-		</Navigation.Tile>
-		<Navigation.Tile id="3" label="Videos">
-			<IconVideo />
-		</Navigation.Tile>
+	<Navigation.Bar {value} onValueChange={(newValue) => (value = newValue)}>
+		<Navigation.Tile id="files" label="Files"><IconFolder /></Navigation.Tile>
+		<Navigation.Tile id="images" label="Images"><IconImage /></Navigation.Tile>
+		<Navigation.Tile id="music" label="Music"><IconMusic /></Navigation.Tile>
+		<Navigation.Tile id="videos" label="Videos"><IconVideo /></Navigation.Tile>
 	</Navigation.Bar>
 </div>
diff --git a/sites/next.skeleton.dev/src/examples/components/navigation/ExampleBar.tsx b/sites/next.skeleton.dev/src/examples/components/navigation/ExampleBar.tsx
index 40faf8908d..5f09690611 100644
--- a/sites/next.skeleton.dev/src/examples/components/navigation/ExampleBar.tsx
+++ b/sites/next.skeleton.dev/src/examples/components/navigation/ExampleBar.tsx
@@ -3,28 +3,26 @@ import { Navigation } from '@skeletonlabs/skeleton-react';
 import { Folder as IconFolder, Image as IconImage, Music as IconMusic, Video as IconVideo } from 'lucide-react';
 
 export const Page: React.FC = () => {
-	// You may optionally bind a selected state value
-	// Pass the ID item you wish to be selected by default.
 	const [value, setValue] = React.useState('0');
 
 	return (
 		<div className="card border-surface-100-900 grid h-[512px] w-[320px] grid-rows-[1fr_auto] border-[1px]">
 			{/* Content */}
 			<div className="flex items-center justify-center">
-				<p className="opacity-20">(Content)</p>
+				<pre className="pre">value: {value}</pre>
 			</div>
 			{/* Component */}
 			<Navigation.Bar value={value} onValueChange={setValue}>
-				<Navigation.Tile id="0" label="Files">
+				<Navigation.Tile id="files" label="Files">
 					<IconFolder />
 				</Navigation.Tile>
-				<Navigation.Tile id="1" label="Images">
+				<Navigation.Tile id="images" label="Images">
 					<IconImage />
 				</Navigation.Tile>
-				<Navigation.Tile id="2" label="Music">
+				<Navigation.Tile id="music" label="Music">
 					<IconMusic />
 				</Navigation.Tile>
-				<Navigation.Tile id="3" label="Videos">
+				<Navigation.Tile id="videos" label="Videos">
 					<IconVideo />
 				</Navigation.Tile>
 			</Navigation.Bar>
diff --git a/sites/next.skeleton.dev/src/examples/components/navigation/ExampleBarRouting.svelte b/sites/next.skeleton.dev/src/examples/components/navigation/ExampleBarRouting.svelte
new file mode 100644
index 0000000000..c4015bd49f
--- /dev/null
+++ b/sites/next.skeleton.dev/src/examples/components/navigation/ExampleBarRouting.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Navigation } from '@skeletonlabs/skeleton-svelte';
+	// Icons
+	import IconFolder from 'lucide-svelte/icons/folder';
+	import IconImage from 'lucide-svelte/icons/image';
+	import IconMusic from 'lucide-svelte/icons/music';
+	import IconVideo from 'lucide-svelte/icons/video';
+</script>
+
+<div class="card border-surface-100-900 grid h-[512px] w-[320px] grid-rows-[1fr_auto] border-[1px]">
+	<!-- Content -->
+	<div class="flex items-center justify-center">
+		<p class="opacity-20">(Content)</p>
+	</div>
+	<!-- Component -->
+	<Navigation.Bar>
+		<Navigation.Tile label="Files" href="#/files"><IconFolder /></Navigation.Tile>
+		<Navigation.Tile label="Images" href="#/images"><IconImage /></Navigation.Tile>
+		<Navigation.Tile label="Music" href="#/music"><IconMusic /></Navigation.Tile>
+		<Navigation.Tile label="Videos" href="#/videos"><IconVideo /></Navigation.Tile>
+	</Navigation.Bar>
+</div>
diff --git a/sites/next.skeleton.dev/src/examples/components/navigation/ExampleBarRouting.tsx b/sites/next.skeleton.dev/src/examples/components/navigation/ExampleBarRouting.tsx
new file mode 100644
index 0000000000..8f0b4f3896
--- /dev/null
+++ b/sites/next.skeleton.dev/src/examples/components/navigation/ExampleBarRouting.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Navigation } from '@skeletonlabs/skeleton-react';
+import { Folder as IconFolder, Image as IconImage, Music as IconMusic, Video as IconVideo } from 'lucide-react';
+
+export const Page: React.FC = () => {
+	return (
+		<div className="card border-surface-100-900 grid h-[512px] w-[320px] grid-rows-[1fr_auto] border-[1px]">
+			{/* Content */}
+			<div className="flex items-center justify-center">
+				<p className="opacity-20">(Content)</p>
+			</div>
+			{/* Component */}
+			<Navigation.Bar>
+				<Navigation.Tile label="Files" href="#/files">
+					<IconFolder />
+				</Navigation.Tile>
+				<Navigation.Tile label="Images" href="#/images">
+					<IconImage />
+				</Navigation.Tile>
+				<Navigation.Tile label="Music" href="#/music">
+					<IconMusic />
+				</Navigation.Tile>
+				<Navigation.Tile label="Videos" href="#/videos">
+					<IconVideo />
+				</Navigation.Tile>
+			</Navigation.Bar>
+		</div>
+	);
+};
diff --git a/sites/next.skeleton.dev/src/examples/components/navigation/ExampleRail.svelte b/sites/next.skeleton.dev/src/examples/components/navigation/ExampleRail.svelte
new file mode 100644
index 0000000000..f19a55c547
--- /dev/null
+++ b/sites/next.skeleton.dev/src/examples/components/navigation/ExampleRail.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Navigation } from '@skeletonlabs/skeleton-svelte';
+	// Icons
+	import IconFolder from 'lucide-svelte/icons/folder';
+	import IconImage from 'lucide-svelte/icons/image';
+	import IconMusic from 'lucide-svelte/icons/music';
+	import IconVideo from 'lucide-svelte/icons/video';
+
+	// State
+	let value = $state('files');
+</script>
+
+<div class="card border-surface-100-900 grid h-[640px] w-full grid-cols-[auto_1fr] border-[1px]">
+	<!-- Component -->
+	<Navigation.Rail {value} onValueChange={(newValue) => (value = newValue)}>
+		{#snippet tiles()}
+			<Navigation.Tile id="files" label="Files"><IconFolder /></Navigation.Tile>
+			<Navigation.Tile id="images" label="Images"><IconImage /></Navigation.Tile>
+			<Navigation.Tile id="music" label="Music"><IconMusic /></Navigation.Tile>
+			<Navigation.Tile id="videos" label="Videos"><IconVideo /></Navigation.Tile>
+		{/snippet}
+	</Navigation.Rail>
+	<!-- Content -->
+	<div class="flex items-center justify-center">
+		<pre class="pre">value: {value}</pre>
+	</div>
+</div>
diff --git a/sites/next.skeleton.dev/src/examples/components/navigation/ExampleRail.tsx b/sites/next.skeleton.dev/src/examples/components/navigation/ExampleRail.tsx
new file mode 100644
index 0000000000..38df59e1bd
--- /dev/null
+++ b/sites/next.skeleton.dev/src/examples/components/navigation/ExampleRail.tsx
@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import { Navigation } from '@skeletonlabs/skeleton-react';
+import { Folder as IconFolder, Image as IconImage, Music as IconMusic, Video as IconVideo } from 'lucide-react';
+
+export const Page: React.FC = () => {
+	const [value, setValue] = useState('files');
+
+	return (
+		<div className="card border-surface-100-900 grid h-[640px] w-full grid-cols-[auto_1fr] border-[1px]">
+			{/* Component */}
+			<Navigation.Rail value={value} onValueChange={setValue}>
+				<Navigation.Tile id="files" label="Files">
+					<IconFolder />
+				</Navigation.Tile>
+				<Navigation.Tile id="images" label="Images">
+					<IconImage />
+				</Navigation.Tile>
+				<Navigation.Tile id="music" label="Music">
+					<IconMusic />
+				</Navigation.Tile>
+				<Navigation.Tile id="videos" label="Videos">
+					<IconVideo />
+				</Navigation.Tile>
+			</Navigation.Rail>
+			{/* Content */}
+			<div className="flex items-center justify-center">
+				<pre className="pre">value: {value}</pre>
+			</div>
+		</div>
+	);
+};
diff --git a/sites/next.skeleton.dev/src/examples/components/navigation/ExampleExpanded.svelte b/sites/next.skeleton.dev/src/examples/components/navigation/ExampleRailExpanded.svelte
similarity index 66%
rename from sites/next.skeleton.dev/src/examples/components/navigation/ExampleExpanded.svelte
rename to sites/next.skeleton.dev/src/examples/components/navigation/ExampleRailExpanded.svelte
index 792b442da7..4a28f846c8 100644
--- a/sites/next.skeleton.dev/src/examples/components/navigation/ExampleExpanded.svelte
+++ b/sites/next.skeleton.dev/src/examples/components/navigation/ExampleRailExpanded.svelte
@@ -9,29 +9,33 @@
 	import IconGames from 'lucide-svelte/icons/gamepad';
 	import IconSettings from 'lucide-svelte/icons/settings';
 
-	let hrefExample = '#';
+	let isExpansed = $state(true);
+
+	function toggleExpanded() {
+		isExpansed = !isExpansed;
+	}
 </script>
 
 <div class="card border-surface-100-900 grid h-[760px] w-full grid-cols-[auto_1fr] border-[1px]">
 	<!-- Component -->
-	<Navigation.Rail expanded>
+	<Navigation.Rail expanded={isExpansed}>
 		{#snippet header()}
-			<Navigation.Tile href="/" labelExpanded="Menu"><IconMenu /></Navigation.Tile>
+			<Navigation.Tile labelExpanded="Menu" onclick={toggleExpanded} title="Toggle Menu Width"><IconMenu /></Navigation.Tile>
 		{/snippet}
 		{#snippet tiles()}
-			<Navigation.Tile id="0" labelExpanded="Browse Files" href={hrefExample}>
+			<Navigation.Tile labelExpanded="Browse Files" href="#/files">
 				<IconFolder />
 			</Navigation.Tile>
-			<Navigation.Tile id="1" labelExpanded="Browse Images" href={hrefExample}>
+			<Navigation.Tile labelExpanded="Browse Images" href="#/images">
 				<IconImage />
 			</Navigation.Tile>
-			<Navigation.Tile id="2" labelExpanded="Browse Music" href={hrefExample}>
+			<Navigation.Tile labelExpanded="Browse Music" href="#/music">
 				<IconMusic />
 			</Navigation.Tile>
-			<Navigation.Tile id="2" labelExpanded="Browse Videos" href={hrefExample}>
+			<Navigation.Tile labelExpanded="Browse Videos" href="#/videos">
 				<IconVideo />
 			</Navigation.Tile>
-			<Navigation.Tile id="2" labelExpanded="Browse Games" href={hrefExample}>
+			<Navigation.Tile labelExpanded="Browse Games" href="/games">
 				<IconGames />
 			</Navigation.Tile>
 		{/snippet}
diff --git a/sites/next.skeleton.dev/src/examples/components/navigation/ExampleExpanded.tsx b/sites/next.skeleton.dev/src/examples/components/navigation/ExampleRailExpanded.tsx
similarity index 57%
rename from sites/next.skeleton.dev/src/examples/components/navigation/ExampleExpanded.tsx
rename to sites/next.skeleton.dev/src/examples/components/navigation/ExampleRailExpanded.tsx
index 6317bcfa62..ad852f2e9c 100644
--- a/sites/next.skeleton.dev/src/examples/components/navigation/ExampleExpanded.tsx
+++ b/sites/next.skeleton.dev/src/examples/components/navigation/ExampleRailExpanded.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Navigation } from '@skeletonlabs/skeleton-react';
 import {
 	Menu as IconMenu,
@@ -10,35 +11,42 @@ import {
 } from 'lucide-react';
 
 export const Page: React.FC = () => {
+	const [isExpanded, setIsExpanded] = useState(true);
+
+	function toggleExpanded() {
+		const newValue = !isExpanded;
+		setIsExpanded(newValue);
+	}
+
 	return (
 		<div className="card border-surface-100-900 grid h-[640px] w-full grid-cols-[auto_1fr] border-[1px]">
 			{/* Component */}
 			<Navigation.Rail
-				expanded
+				expanded={isExpanded}
 				header={
-					<Navigation.Tile href="/" labelExpanded="Menu">
+					<Navigation.Tile labelExpanded="Menu" title="Toggle Menu Width" onClick={toggleExpanded}>
 						<IconMenu />
 					</Navigation.Tile>
 				}
 				footer={
-					<Navigation.Tile href="/settings" labelExpanded="Settings">
+					<Navigation.Tile href="#/settings" labelExpanded="Settings">
 						<IconSettings />
 					</Navigation.Tile>
 				}
 			>
-				<Navigation.Tile id="0" labelExpanded="Browse Files" href="#">
+				<Navigation.Tile labelExpanded="Browse Files" href="#/files">
 					<IconFolder />
 				</Navigation.Tile>
-				<Navigation.Tile id="1" labelExpanded="Browse Images" href="#">
+				<Navigation.Tile labelExpanded="Browse Images" href="#/images">
 					<IconImage />
 				</Navigation.Tile>
-				<Navigation.Tile id="2" labelExpanded="Browse Music" href="#">
+				<Navigation.Tile labelExpanded="Browse Music" href="#/music">
 					<IconMusic />
 				</Navigation.Tile>
-				<Navigation.Tile id="3" labelExpanded="Browse Videos" href="#">
+				<Navigation.Tile labelExpanded="Browse Videos" href="#/videos">
 					<IconVideo />
 				</Navigation.Tile>
-				<Navigation.Tile id="4" labelExpanded="Browse Games" href="#">
+				<Navigation.Tile labelExpanded="Browse Games" href="#/games">
 					<IconGames />
 				</Navigation.Tile>
 			</Navigation.Rail>
diff --git a/sites/next.skeleton.dev/src/examples/components/navigation/Example.svelte b/sites/next.skeleton.dev/src/examples/components/navigation/ExampleRailRouting.svelte
similarity index 60%
rename from sites/next.skeleton.dev/src/examples/components/navigation/Example.svelte
rename to sites/next.skeleton.dev/src/examples/components/navigation/ExampleRailRouting.svelte
index ae4912c331..5c1e9eac69 100644
--- a/sites/next.skeleton.dev/src/examples/components/navigation/Example.svelte
+++ b/sites/next.skeleton.dev/src/examples/components/navigation/ExampleRailRouting.svelte
@@ -7,32 +7,22 @@
 	import IconMusic from 'lucide-svelte/icons/music';
 	import IconVideo from 'lucide-svelte/icons/video';
 	import IconSettings from 'lucide-svelte/icons/settings';
-
-	let hrefExample = '#';
 </script>
 
 <div class="card border-surface-100-900 grid h-[640px] w-full grid-cols-[auto_1fr] border-[1px]">
 	<!-- Component -->
 	<Navigation.Rail>
 		{#snippet header()}
-			<Navigation.Tile href="/" title="Menu"><IconMenu /></Navigation.Tile>
+			<Navigation.Tile href="#" title="Menu"><IconMenu /></Navigation.Tile>
 		{/snippet}
 		{#snippet tiles()}
-			<Navigation.Tile id="0" label="Files" href={hrefExample}>
-				<IconFolder />
-			</Navigation.Tile>
-			<Navigation.Tile id="1" label="Images" href={hrefExample}>
-				<IconImage />
-			</Navigation.Tile>
-			<Navigation.Tile id="2" label="Music" href={hrefExample}>
-				<IconMusic />
-			</Navigation.Tile>
-			<Navigation.Tile id="3" label="Videos" href={hrefExample}>
-				<IconVideo />
-			</Navigation.Tile>
+			<Navigation.Tile label="Files" href="#/files"><IconFolder /></Navigation.Tile>
+			<Navigation.Tile label="Images" href="#/images"><IconImage /></Navigation.Tile>
+			<Navigation.Tile label="Music" href="#/music"><IconMusic /></Navigation.Tile>
+			<Navigation.Tile label="Videos" href="#/videos"><IconVideo /></Navigation.Tile>
 		{/snippet}
 		{#snippet footer()}
-			<Navigation.Tile labelExpanded="Settings" href="/settings" title="settings"><IconSettings /></Navigation.Tile>
+			<Navigation.Tile labelExpanded="Settings" href="#settings" title="settings"><IconSettings /></Navigation.Tile>
 		{/snippet}
 	</Navigation.Rail>
 	<!-- Content -->
diff --git a/sites/next.skeleton.dev/src/examples/components/navigation/Example.tsx b/sites/next.skeleton.dev/src/examples/components/navigation/ExampleRailRouting.tsx
similarity index 74%
rename from sites/next.skeleton.dev/src/examples/components/navigation/Example.tsx
rename to sites/next.skeleton.dev/src/examples/components/navigation/ExampleRailRouting.tsx
index 2e48f8af32..0778c8a2e9 100644
--- a/sites/next.skeleton.dev/src/examples/components/navigation/Example.tsx
+++ b/sites/next.skeleton.dev/src/examples/components/navigation/ExampleRailRouting.tsx
@@ -15,26 +15,26 @@ export const Page: React.FC = () => {
 			{/* Component */}
 			<Navigation.Rail
 				header={
-					<Navigation.Tile href="/" title="Menu">
+					<Navigation.Tile href="#" title="Menu">
 						<IconMenu />
 					</Navigation.Tile>
 				}
 				footer={
-					<Navigation.Tile href="/settings" title="settings">
+					<Navigation.Tile href="#" title="settings">
 						<IconSettings />
 					</Navigation.Tile>
 				}
 			>
-				<Navigation.Tile id="0" label="Files" href="#">
+				<Navigation.Tile label="Files" href="#">
 					<IconFolder />
 				</Navigation.Tile>
-				<Navigation.Tile id="1" label="Images" href="#">
+				<Navigation.Tile label="Images" href="#">
 					<IconImage />
 				</Navigation.Tile>
-				<Navigation.Tile id="2" label="Music" href="#">
+				<Navigation.Tile label="Music" href="#">
 					<IconMusic />
 				</Navigation.Tile>
-				<Navigation.Tile id="3" label="Videos" href="#">
+				<Navigation.Tile label="Videos" href="#">
 					<IconVideo />
 				</Navigation.Tile>
 			</Navigation.Rail>
diff --git a/sites/next.skeleton.dev/src/examples/components/navigation/ExampleTiles.svelte b/sites/next.skeleton.dev/src/examples/components/navigation/ExampleTiles.svelte
index 4eeb83107f..5a77a0920c 100644
--- a/sites/next.skeleton.dev/src/examples/components/navigation/ExampleTiles.svelte
+++ b/sites/next.skeleton.dev/src/examples/components/navigation/ExampleTiles.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
 	import { Navigation } from '@skeletonlabs/skeleton-svelte';
 	import IconBox from 'lucide-svelte/icons/box';
-
-	let hrefExample = '#';
 </script>
 
 <div class="card preset-filled-surface-100-900 grid grid-cols-3 gap-5 p-5">
@@ -15,7 +13,7 @@
 		<IconBox />
 	</Navigation.Tile>
 	<!-- When adding an href, they are converted to anchors -->
-	<Navigation.Tile id="0" label="Anchor" href={hrefExample}>
+	<Navigation.Tile label="Anchor" href="#">
 		<IconBox />
 	</Navigation.Tile>
 </div>
diff --git a/sites/next.skeleton.dev/src/examples/components/navigation/ExampleTiles.tsx b/sites/next.skeleton.dev/src/examples/components/navigation/ExampleTiles.tsx
index 6523cad824..69d87a0a7d 100644
--- a/sites/next.skeleton.dev/src/examples/components/navigation/ExampleTiles.tsx
+++ b/sites/next.skeleton.dev/src/examples/components/navigation/ExampleTiles.tsx
@@ -14,7 +14,7 @@ export const Page: React.FC = () => {
 				<IconBox />
 			</Navigation.Tile>
 			{/* When adding an href, they are converted to anchors */}
-			<Navigation.Tile id="0" label="Anchor" href="#">
+			<Navigation.Tile label="Anchor" href="#">
 				<IconBox />
 			</Navigation.Tile>
 		</div>
diff --git a/sites/next.skeleton.dev/src/examples/components/navigation/ExampleTilesSelectionReact.txt b/sites/next.skeleton.dev/src/examples/components/navigation/ExampleTilesSelectionReact.txt
new file mode 100644
index 0000000000..d6281a5a46
--- /dev/null
+++ b/sites/next.skeleton.dev/src/examples/components/navigation/ExampleTilesSelectionReact.txt
@@ -0,0 +1,31 @@
+import React, { useEffect } from 'react';
+import { Navigation } from '@skeletonlabs/skeleton-react';
+
+export const Page: React.FC = () => {
+	let urlPathname = '';
+
+	const links = [
+		{ label: 'Files', href: '#/files' },
+		{ label: 'Images', href: '#/images' },
+		{ label: 'Music', href: '#/music' },
+		{ label: 'Videos', href: '#/videos' },
+	];
+
+	useEffect(() => {
+		urlPathname = window.location.href;
+	});
+
+	return (
+		<Navigation.Bar>
+			{links.map((link) => (
+				<Navigation.Tile
+					label={link.label}
+					href={link.href}
+					selected={urlPathname === link.href}
+				>
+					{link.label}
+				</Navigation.Tile>
+			))}
+		</Navigation.Bar>
+	);
+};
diff --git a/sites/next.skeleton.dev/src/examples/components/navigation/ExampleTilesSelectionSvelte.txt b/sites/next.skeleton.dev/src/examples/components/navigation/ExampleTilesSelectionSvelte.txt
new file mode 100644
index 0000000000..442cb6cbd5
--- /dev/null
+++ b/sites/next.skeleton.dev/src/examples/components/navigation/ExampleTilesSelectionSvelte.txt
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { page } from '$app/state';
+
+	const links = [
+		{ label: 'Files', href: '#/files' },
+		{ label: 'Images', href: '#/images' },
+		{ label: 'Music', href: '#/music' },
+		{ label: 'Videos', href: '#/videos' },
+	];
+</script>
+
+<Navigation.Bar>
+	{#each links as {label, href}}
+		<Navigation.Tile
+			{label}
+			{href}
+			selected={page.url.pathname  === link.href}
+		>
+			{icon}
+		</Navigation.Tile>
+	{/each}
+</Navigation.Bar>


Reviews:
user: login: TazorDE
state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-03-06T23:44:50Z

Review comments:
diff_hunk: @@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Navigation } from '@skeletonlabs/skeleton-svelte';
+	// Icons
+	import IconFolder from 'lucide-svelte/icons/folder';
+	import IconImage from 'lucide-svelte/icons/image';
+	import IconMusic from 'lucide-svelte/icons/music';
+	import IconVideo from 'lucide-svelte/icons/video';
+</script>
+
+<div class="card border-surface-100-900 grid h-[512px] w-[320px] grid-rows-[1fr_auto] border-[1px]">
+	<!-- Content -->
+	<div class="flex items-center justify-center">
+		<p class="opacity-20">(Content)</p>
+	</div>
+	<!-- Component -->
+	<Navigation.Bar>
+		<Navigation.Tile label="Files" href="/files"><IconFolder /></Navigation.Tile>
+		<Navigation.Tile label="Images" href="/images"><IconImage /></Navigation.Tile>
+		<Navigation.Tile label="Music" href="/music"><IconMusic /></Navigation.Tile>
+		<Navigation.Tile label="Videos" href="/videos"><IconVideo /></Navigation.Tile>
path: sites/next.skeleton.dev/src/examples/components/navigation/ExampleBarRouting.svelte
user: login: TazorDE
body: ```suggestion
		<Navigation.Tile label="Files" href="#/files"><IconFolder /></Navigation.Tile>
		<Navigation.Tile label="Images" href="#/images"><IconImage /></Navigation.Tile>
		<Navigation.Tile label="Music" href="#/music"><IconMusic /></Navigation.Tile>
		<Navigation.Tile label="Videos" href="#/videos"><IconVideo /></Navigation.Tile>
```
For documentation purposes I'd add a `#` before each href to prevent accidental navigation to somewhere that doesn't exist in the docs page and to stay on the same page
created_at: 2025-03-06T23:36:38Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,29 @@
+import React from 'react';
+import { Navigation } from '@skeletonlabs/skeleton-react';
+import { Folder as IconFolder, Image as IconImage, Music as IconMusic, Video as IconVideo } from 'lucide-react';
+
+export const Page: React.FC = () => {
+	return (
+		<div className="card border-surface-100-900 grid h-[512px] w-[320px] grid-rows-[1fr_auto] border-[1px]">
+			{/* Content */}
+			<div className="flex items-center justify-center">
+				<p className="opacity-20">(Content)</p>
+			</div>
+			{/* Component */}
+			<Navigation.Bar>
+				<Navigation.Tile label="Files" href="/files">
+					<IconFolder />
+				</Navigation.Tile>
+				<Navigation.Tile label="Images" href="/images">
+					<IconImage />
+				</Navigation.Tile>
+				<Navigation.Tile label="Music" href="/music">
+					<IconMusic />
+				</Navigation.Tile>
+				<Navigation.Tile label="Videos" href="/videos">
path: sites/next.skeleton.dev/src/examples/components/navigation/ExampleBarRouting.tsx
user: login: TazorDE
body: ```suggestion
				<Navigation.Tile label="Files" href="#/files">
					<IconFolder />
				</Navigation.Tile>
				<Navigation.Tile label="Images" href="#/images">
					<IconImage />
				</Navigation.Tile>
				<Navigation.Tile label="Music" href="#/music">
					<IconMusic />
				</Navigation.Tile>
				<Navigation.Tile label="Videos" href="#/videos">
```
created_at: 2025-03-06T23:37:13Z
author_association: MEMBER
diff_hunk: @@ -9,29 +9,33 @@
 	import IconGames from 'lucide-svelte/icons/gamepad';
 	import IconSettings from 'lucide-svelte/icons/settings';
 
-	let hrefExample = '#';
+	let isExpansed = $state(true);
+
+	function toggleExpanded() {
+		isExpansed = !isExpansed;
+	}
 </script>
 
 <div class="card border-surface-100-900 grid h-[760px] w-full grid-cols-[auto_1fr] border-[1px]">
 	<!-- Component -->
-	<Navigation.Rail expanded>
+	<Navigation.Rail expanded={isExpansed}>
 		{#snippet header()}
-			<Navigation.Tile href="/" labelExpanded="Menu"><IconMenu /></Navigation.Tile>
+			<Navigation.Tile labelExpanded="Menu" onclick={toggleExpanded} title="Toggle Menu Width"><IconMenu /></Navigation.Tile>
 		{/snippet}
 		{#snippet tiles()}
-			<Navigation.Tile id="0" labelExpanded="Browse Files" href={hrefExample}>
+			<Navigation.Tile labelExpanded="Browse Files" href="/files">
path: sites/next.skeleton.dev/src/examples/components/navigation/ExampleRailExpanded.svelte
user: login: TazorDE
body: ```suggestion
			<Navigation.Tile labelExpanded="Browse Files" href="#/files">
```
created_at: 2025-03-06T23:38:27Z
author_association: MEMBER
diff_hunk: @@ -9,29 +9,33 @@
 	import IconGames from 'lucide-svelte/icons/gamepad';
 	import IconSettings from 'lucide-svelte/icons/settings';
 
-	let hrefExample = '#';
+	let isExpansed = $state(true);
+
+	function toggleExpanded() {
+		isExpansed = !isExpansed;
+	}
 </script>
 
 <div class="card border-surface-100-900 grid h-[760px] w-full grid-cols-[auto_1fr] border-[1px]">
 	<!-- Component -->
-	<Navigation.Rail expanded>
+	<Navigation.Rail expanded={isExpansed}>
 		{#snippet header()}
-			<Navigation.Tile href="/" labelExpanded="Menu"><IconMenu /></Navigation.Tile>
+			<Navigation.Tile labelExpanded="Menu" onclick={toggleExpanded} title="Toggle Menu Width"><IconMenu /></Navigation.Tile>
 		{/snippet}
 		{#snippet tiles()}
-			<Navigation.Tile id="0" labelExpanded="Browse Files" href={hrefExample}>
+			<Navigation.Tile labelExpanded="Browse Files" href="/files">
 				<IconFolder />
 			</Navigation.Tile>
-			<Navigation.Tile id="1" labelExpanded="Browse Images" href={hrefExample}>
+			<Navigation.Tile labelExpanded="Browse Images" href="/images">
path: sites/next.skeleton.dev/src/examples/components/navigation/ExampleRailExpanded.svelte
user: login: TazorDE
body: ```suggestion
			<Navigation.Tile labelExpanded="Browse Images" href="#/images">
```
created_at: 2025-03-06T23:38:37Z
author_association: MEMBER
diff_hunk: @@ -9,29 +9,33 @@
 	import IconGames from 'lucide-svelte/icons/gamepad';
 	import IconSettings from 'lucide-svelte/icons/settings';
 
-	let hrefExample = '#';
+	let isExpansed = $state(true);
+
+	function toggleExpanded() {
+		isExpansed = !isExpansed;
+	}
 </script>
 
 <div class="card border-surface-100-900 grid h-[760px] w-full grid-cols-[auto_1fr] border-[1px]">
 	<!-- Component -->
-	<Navigation.Rail expanded>
+	<Navigation.Rail expanded={isExpansed}>
 		{#snippet header()}
-			<Navigation.Tile href="/" labelExpanded="Menu"><IconMenu /></Navigation.Tile>
+			<Navigation.Tile labelExpanded="Menu" onclick={toggleExpanded} title="Toggle Menu Width"><IconMenu /></Navigation.Tile>
 		{/snippet}
 		{#snippet tiles()}
-			<Navigation.Tile id="0" labelExpanded="Browse Files" href={hrefExample}>
+			<Navigation.Tile labelExpanded="Browse Files" href="/files">
 				<IconFolder />
 			</Navigation.Tile>
-			<Navigation.Tile id="1" labelExpanded="Browse Images" href={hrefExample}>
+			<Navigation.Tile labelExpanded="Browse Images" href="/images">
 				<IconImage />
 			</Navigation.Tile>
-			<Navigation.Tile id="2" labelExpanded="Browse Music" href={hrefExample}>
+			<Navigation.Tile labelExpanded="Browse Music" href="/music">
path: sites/next.skeleton.dev/src/examples/components/navigation/ExampleRailExpanded.svelte
user: login: TazorDE
body: ```suggestion
			<Navigation.Tile labelExpanded="Browse Music" href="#/music">
```
created_at: 2025-03-06T23:38:45Z
author_association: MEMBER
diff_hunk: @@ -9,29 +9,33 @@
 	import IconGames from 'lucide-svelte/icons/gamepad';
 	import IconSettings from 'lucide-svelte/icons/settings';
 
-	let hrefExample = '#';
+	let isExpansed = $state(true);
+
+	function toggleExpanded() {
+		isExpansed = !isExpansed;
+	}
 </script>
 
 <div class="card border-surface-100-900 grid h-[760px] w-full grid-cols-[auto_1fr] border-[1px]">
 	<!-- Component -->
-	<Navigation.Rail expanded>
+	<Navigation.Rail expanded={isExpansed}>
 		{#snippet header()}
-			<Navigation.Tile href="/" labelExpanded="Menu"><IconMenu /></Navigation.Tile>
+			<Navigation.Tile labelExpanded="Menu" onclick={toggleExpanded} title="Toggle Menu Width"><IconMenu /></Navigation.Tile>
 		{/snippet}
 		{#snippet tiles()}
-			<Navigation.Tile id="0" labelExpanded="Browse Files" href={hrefExample}>
+			<Navigation.Tile labelExpanded="Browse Files" href="/files">
 				<IconFolder />
 			</Navigation.Tile>
-			<Navigation.Tile id="1" labelExpanded="Browse Images" href={hrefExample}>
+			<Navigation.Tile labelExpanded="Browse Images" href="/images">
 				<IconImage />
 			</Navigation.Tile>
-			<Navigation.Tile id="2" labelExpanded="Browse Music" href={hrefExample}>
+			<Navigation.Tile labelExpanded="Browse Music" href="/music">
 				<IconMusic />
 			</Navigation.Tile>
-			<Navigation.Tile id="2" labelExpanded="Browse Videos" href={hrefExample}>
+			<Navigation.Tile labelExpanded="Browse Videos" href="/videos">
path: sites/next.skeleton.dev/src/examples/components/navigation/ExampleRailExpanded.svelte
user: login: TazorDE
body: ```suggestion
			<Navigation.Tile labelExpanded="Browse Videos" href="#/videos">
```
created_at: 2025-03-06T23:38:52Z
author_association: MEMBER
diff_hunk: @@ -9,29 +9,33 @@
 	import IconGames from 'lucide-svelte/icons/gamepad';
 	import IconSettings from 'lucide-svelte/icons/settings';
 
-	let hrefExample = '#';
+	let isExpansed = $state(true);
+
+	function toggleExpanded() {
+		isExpansed = !isExpansed;
+	}
 </script>
 
 <div class="card border-surface-100-900 grid h-[760px] w-full grid-cols-[auto_1fr] border-[1px]">
 	<!-- Component -->
-	<Navigation.Rail expanded>
+	<Navigation.Rail expanded={isExpansed}>
 		{#snippet header()}
-			<Navigation.Tile href="/" labelExpanded="Menu"><IconMenu /></Navigation.Tile>
+			<Navigation.Tile labelExpanded="Menu" onclick={toggleExpanded} title="Toggle Menu Width"><IconMenu /></Navigation.Tile>
 		{/snippet}
 		{#snippet tiles()}
-			<Navigation.Tile id="0" labelExpanded="Browse Files" href={hrefExample}>
+			<Navigation.Tile labelExpanded="Browse Files" href="/files">
 				<IconFolder />
 			</Navigation.Tile>
-			<Navigation.Tile id="1" labelExpanded="Browse Images" href={hrefExample}>
+			<Navigation.Tile labelExpanded="Browse Images" href="/images">
 				<IconImage />
 			</Navigation.Tile>
-			<Navigation.Tile id="2" labelExpanded="Browse Music" href={hrefExample}>
+			<Navigation.Tile labelExpanded="Browse Music" href="/music">
 				<IconMusic />
 			</Navigation.Tile>
-			<Navigation.Tile id="2" labelExpanded="Browse Videos" href={hrefExample}>
+			<Navigation.Tile labelExpanded="Browse Videos" href="/videos">
 				<IconVideo />
 			</Navigation.Tile>
-			<Navigation.Tile id="2" labelExpanded="Browse Games" href={hrefExample}>
+			<Navigation.Tile labelExpanded="Browse Games" href="/games">
path: sites/next.skeleton.dev/src/examples/components/navigation/ExampleRailExpanded.svelte
user: login: TazorDE
body: ```suggestion
			<Navigation.Tile labelExpanded="Browse Games" href="#/games">
```
created_at: 2025-03-06T23:38:59Z
author_association: MEMBER
diff_hunk: @@ -26,19 +34,19 @@ export const Page: React.FC = () => {
 					</Navigation.Tile>
 				}
 			>
-				<Navigation.Tile id="0" labelExpanded="Browse Files" href="#">
+				<Navigation.Tile labelExpanded="Browse Files" href="/files">
path: sites/next.skeleton.dev/src/examples/components/navigation/ExampleRailExpanded.tsx
user: login: TazorDE
body: ```suggestion
				<Navigation.Tile labelExpanded="Browse Files" href="#/files">
```
created_at: 2025-03-06T23:39:22Z
author_association: MEMBER
diff_hunk: @@ -26,19 +34,19 @@ export const Page: React.FC = () => {
 					</Navigation.Tile>
 				}
 			>
-				<Navigation.Tile id="0" labelExpanded="Browse Files" href="#">
+				<Navigation.Tile labelExpanded="Browse Files" href="/files">
 					<IconFolder />
 				</Navigation.Tile>
-				<Navigation.Tile id="1" labelExpanded="Browse Images" href="#">
+				<Navigation.Tile labelExpanded="Browse Images" href="/images">
path: sites/next.skeleton.dev/src/examples/components/navigation/ExampleRailExpanded.tsx
user: login: TazorDE
body: ```suggestion
				<Navigation.Tile labelExpanded="Browse Images" href="#/images">
```
created_at: 2025-03-06T23:39:32Z
author_association: MEMBER
diff_hunk: @@ -26,19 +34,19 @@ export const Page: React.FC = () => {
 					</Navigation.Tile>
 				}
 			>
-				<Navigation.Tile id="0" labelExpanded="Browse Files" href="#">
+				<Navigation.Tile labelExpanded="Browse Files" href="/files">
 					<IconFolder />
 				</Navigation.Tile>
-				<Navigation.Tile id="1" labelExpanded="Browse Images" href="#">
+				<Navigation.Tile labelExpanded="Browse Images" href="/images">
 					<IconImage />
 				</Navigation.Tile>
-				<Navigation.Tile id="2" labelExpanded="Browse Music" href="#">
+				<Navigation.Tile labelExpanded="Browse Music" href="/music">
path: sites/next.skeleton.dev/src/examples/components/navigation/ExampleRailExpanded.tsx
user: login: TazorDE
body: ```suggestion
				<Navigation.Tile labelExpanded="Browse Music" href="#/music">
```
created_at: 2025-03-06T23:39:40Z
author_association: MEMBER
diff_hunk: @@ -26,19 +34,19 @@ export const Page: React.FC = () => {
 					</Navigation.Tile>
 				}
 			>
-				<Navigation.Tile id="0" labelExpanded="Browse Files" href="#">
+				<Navigation.Tile labelExpanded="Browse Files" href="/files">
 					<IconFolder />
 				</Navigation.Tile>
-				<Navigation.Tile id="1" labelExpanded="Browse Images" href="#">
+				<Navigation.Tile labelExpanded="Browse Images" href="/images">
 					<IconImage />
 				</Navigation.Tile>
-				<Navigation.Tile id="2" labelExpanded="Browse Music" href="#">
+				<Navigation.Tile labelExpanded="Browse Music" href="/music">
 					<IconMusic />
 				</Navigation.Tile>
-				<Navigation.Tile id="3" labelExpanded="Browse Videos" href="#">
+				<Navigation.Tile labelExpanded="Browse Videos" href="/videos">
path: sites/next.skeleton.dev/src/examples/components/navigation/ExampleRailExpanded.tsx
user: login: TazorDE
body: ```suggestion
				<Navigation.Tile labelExpanded="Browse Videos" href="#/videos">
```
created_at: 2025-03-06T23:39:48Z
author_association: MEMBER
diff_hunk: @@ -26,19 +34,19 @@ export const Page: React.FC = () => {
 					</Navigation.Tile>
 				}
 			>
-				<Navigation.Tile id="0" labelExpanded="Browse Files" href="#">
+				<Navigation.Tile labelExpanded="Browse Files" href="/files">
 					<IconFolder />
 				</Navigation.Tile>
-				<Navigation.Tile id="1" labelExpanded="Browse Images" href="#">
+				<Navigation.Tile labelExpanded="Browse Images" href="/images">
 					<IconImage />
 				</Navigation.Tile>
-				<Navigation.Tile id="2" labelExpanded="Browse Music" href="#">
+				<Navigation.Tile labelExpanded="Browse Music" href="/music">
 					<IconMusic />
 				</Navigation.Tile>
-				<Navigation.Tile id="3" labelExpanded="Browse Videos" href="#">
+				<Navigation.Tile labelExpanded="Browse Videos" href="/videos">
 					<IconVideo />
 				</Navigation.Tile>
-				<Navigation.Tile id="4" labelExpanded="Browse Games" href="#">
+				<Navigation.Tile labelExpanded="Browse Games" href="/games">
path: sites/next.skeleton.dev/src/examples/components/navigation/ExampleRailExpanded.tsx
user: login: TazorDE
body: ```suggestion
				<Navigation.Tile labelExpanded="Browse Games" href="#/games">
```
created_at: 2025-03-06T23:39:54Z
author_association: MEMBER
diff_hunk: @@ -18,18 +16,10 @@
 			<Navigation.Tile href="/" title="Menu"><IconMenu /></Navigation.Tile>
 		{/snippet}
 		{#snippet tiles()}
-			<Navigation.Tile id="0" label="Files" href={hrefExample}>
-				<IconFolder />
-			</Navigation.Tile>
-			<Navigation.Tile id="1" label="Images" href={hrefExample}>
-				<IconImage />
-			</Navigation.Tile>
-			<Navigation.Tile id="2" label="Music" href={hrefExample}>
-				<IconMusic />
-			</Navigation.Tile>
-			<Navigation.Tile id="3" label="Videos" href={hrefExample}>
-				<IconVideo />
-			</Navigation.Tile>
+			<Navigation.Tile label="Files" href="/files"><IconFolder /></Navigation.Tile>
+			<Navigation.Tile label="Images" href="/images"><IconImage /></Navigation.Tile>
+			<Navigation.Tile label="Music" href="/music"><IconMusic /></Navigation.Tile>
+			<Navigation.Tile label="Videos" href="/videos"><IconVideo /></Navigation.Tile>
path: sites/next.skeleton.dev/src/examples/components/navigation/ExampleRailRouting.svelte
user: login: TazorDE
body: ```suggestion
			<Navigation.Tile label="Files" href="#/files"><IconFolder /></Navigation.Tile>
			<Navigation.Tile label="Images" href="#/images"><IconImage /></Navigation.Tile>
			<Navigation.Tile label="Music" href="#/music"><IconMusic /></Navigation.Tile>
			<Navigation.Tile label="Videos" href="#/videos"><IconVideo /></Navigation.Tile>
```
created_at: 2025-03-06T23:40:21Z
author_association: MEMBER
diff_hunk: @@ -20,21 +20,21 @@ export const Page: React.FC = () => {
 					</Navigation.Tile>
 				}
 				footer={
-					<Navigation.Tile href="/settings" title="settings">
+					<Navigation.Tile href="/" title="settings">
path: sites/next.skeleton.dev/src/examples/components/navigation/ExampleRailRouting.tsx
user: login: TazorDE
body: ```suggestion
					<Navigation.Tile href="#/" title="settings">
```
created_at: 2025-03-06T23:40:36Z
author_association: MEMBER
diff_hunk: @@ -20,21 +20,21 @@ export const Page: React.FC = () => {
 					</Navigation.Tile>
 				}
 				footer={
-					<Navigation.Tile href="/settings" title="settings">
+					<Navigation.Tile href="/" title="settings">
 						<IconSettings />
 					</Navigation.Tile>
 				}
 			>
-				<Navigation.Tile id="0" label="Files" href="#">
+				<Navigation.Tile label="Files" href="/">
path: sites/next.skeleton.dev/src/examples/components/navigation/ExampleRailRouting.tsx
user: login: TazorDE
body: ```suggestion
				<Navigation.Tile label="Files" href="#/">
```
created_at: 2025-03-06T23:40:43Z
author_association: MEMBER
diff_hunk: @@ -20,21 +20,21 @@ export const Page: React.FC = () => {
 					</Navigation.Tile>
 				}
 				footer={
-					<Navigation.Tile href="/settings" title="settings">
+					<Navigation.Tile href="/" title="settings">
 						<IconSettings />
 					</Navigation.Tile>
 				}
 			>
-				<Navigation.Tile id="0" label="Files" href="#">
+				<Navigation.Tile label="Files" href="/">
 					<IconFolder />
 				</Navigation.Tile>
-				<Navigation.Tile id="1" label="Images" href="#">
+				<Navigation.Tile label="Images" href="/">
path: sites/next.skeleton.dev/src/examples/components/navigation/ExampleRailRouting.tsx
user: login: TazorDE
body: ```suggestion
				<Navigation.Tile label="Images" href="#/">
```
created_at: 2025-03-06T23:40:52Z
author_association: MEMBER
diff_hunk: @@ -20,21 +20,21 @@ export const Page: React.FC = () => {
 					</Navigation.Tile>
 				}
 				footer={
-					<Navigation.Tile href="/settings" title="settings">
+					<Navigation.Tile href="/" title="settings">
 						<IconSettings />
 					</Navigation.Tile>
 				}
 			>
-				<Navigation.Tile id="0" label="Files" href="#">
+				<Navigation.Tile label="Files" href="/">
 					<IconFolder />
 				</Navigation.Tile>
-				<Navigation.Tile id="1" label="Images" href="#">
+				<Navigation.Tile label="Images" href="/">
 					<IconImage />
 				</Navigation.Tile>
-				<Navigation.Tile id="2" label="Music" href="#">
+				<Navigation.Tile label="Music" href="/">
path: sites/next.skeleton.dev/src/examples/components/navigation/ExampleRailRouting.tsx
user: login: TazorDE
body: ```suggestion
				<Navigation.Tile label="Music" href="#/">
```
created_at: 2025-03-06T23:40:59Z
author_association: MEMBER
diff_hunk: @@ -20,21 +20,21 @@ export const Page: React.FC = () => {
 					</Navigation.Tile>
 				}
 				footer={
-					<Navigation.Tile href="/settings" title="settings">
+					<Navigation.Tile href="/" title="settings">
 						<IconSettings />
 					</Navigation.Tile>
 				}
 			>
-				<Navigation.Tile id="0" label="Files" href="#">
+				<Navigation.Tile label="Files" href="/">
 					<IconFolder />
 				</Navigation.Tile>
-				<Navigation.Tile id="1" label="Images" href="#">
+				<Navigation.Tile label="Images" href="/">
 					<IconImage />
 				</Navigation.Tile>
-				<Navigation.Tile id="2" label="Music" href="#">
+				<Navigation.Tile label="Music" href="/">
 					<IconMusic />
 				</Navigation.Tile>
-				<Navigation.Tile id="3" label="Videos" href="#">
+				<Navigation.Tile label="Videos" href="/">
path: sites/next.skeleton.dev/src/examples/components/navigation/ExampleRailRouting.tsx
user: login: TazorDE
body: ```suggestion
				<Navigation.Tile label="Videos" href="#/">
```
created_at: 2025-03-06T23:41:07Z
author_association: MEMBER
diff_hunk: @@ -72,6 +117,12 @@ Tiles are universal between Rails and Bars. They default to buttons, but will co
 	</Fragment>
 </Preview>
 
+### Anchor Tile Selection
+
+When using anchor Tiles, use the `selected` prop to highlight the active tile. For SvelteKit, this can be achieved using the `page` state and comparing the page pathname and tile URLs.
path: sites/next.skeleton.dev/src/content/docs/components/navigation/react.mdx
user: login: TazorDE
body: you probably don't want to reference SvelteKit in the React docs
created_at: 2025-03-06T23:44:28Z
author_association: MEMBER

PR comments:
user: login: changeset-bot[bot]
created_at: 2025-03-06T22:05:47Z
body: ###  ⚠️  No Changeset found

Latest commit: 8e36c232ae88e6e7d936af79e012956172afc0a8

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/skeletonlabs/skeleton/new/docs/improve-navigation-examples?filename=.changeset/silent-falcons-protect.md&value=---%0A%22%40skeletonlabs%2Fnext.skeleton.dev%22%3A%20patch%0A---%0A%0ANavigation%20Component%20Examples%20Reworked%0A)


author_association: NONE
user: login: vercel[bot]
created_at: 2025-03-06T22:05:49Z
body: [vc]: #zlG6HzRTx8JoUDPD11/5qSvNlT3gKWKdqmNV+sOlW9s=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJza2VsZXRvbi1kb2NzIiwicm9vdERpcmVjdG9yeSI6InNpdGVzL3NrZWxldG9uLmRldiIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiIifSwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL3NrZWxldG9uLWxhYnMvc2tlbGV0b24tZG9jcy9EVGlpVldyNG9VTTVXWVk5RFlRNEd2cGFMS2dUIiwicHJldmlld1VybCI6IiIsIm5leHRDb21taXRTdGF0dXMiOiJGQUlMRUQifSx7Im5hbWUiOiJza2VsZXRvbi1uZXh0Iiwicm9vdERpcmVjdG9yeSI6InNpdGVzL25leHQuc2tlbGV0b24uZGV2IiwibGl2ZUZlZWRiYWNrIjp7InJlc29sdmVkIjowLCJ1bnJlc29sdmVkIjowLCJ0b3RhbCI6MCwibGluayI6InNrZWxldG9uLW5leHQtZ2l0LWRvY3MtaW1wcm92ZS1uYXZpZ2F0aW9uLTBmM2JjMS1za2VsZXRvbi1sYWJzLnZlcmNlbC5hcHAifSwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL3NrZWxldG9uLWxhYnMvc2tlbGV0b24tbmV4dC9IOFNqZ3oxRmpZV3VVMXV5c05QNE1UZ3djUk5jIiwicHJldmlld1VybCI6InNrZWxldG9uLW5leHQtZ2l0LWRvY3MtaW1wcm92ZS1uYXZpZ2F0aW9uLTBmM2JjMS1za2VsZXRvbi1sYWJzLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQifSx7Im5hbWUiOiJza2VsZXRvbi10aGVtZXMiLCJyb290RGlyZWN0b3J5Ijoic2l0ZXMvdGhlbWVzLnNrZWxldG9uLmRldiIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiIifSwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL3NrZWxldG9uLWxhYnMvc2tlbGV0b24tdGhlbWVzLzdaQ0NSOEhlTG5CclVDeXoxV3hodmUyc1JhaUYiLCJuZXh0Q29tbWl0U3RhdHVzIjoiSUdOT1JFRCIsInByZXZpZXdVcmwiOiJza2VsZXRvbi10aGVtZXMtZ2l0LWRvY3MtaW1wcm92ZS1uYXZpZ2F0aW8tYjBhZGMxLXNrZWxldG9uLWxhYnMudmVyY2VsLmFwcCJ9XX0=
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **skeleton-docs** | ❌ Failed ([Inspect](https://vercel.com/skeleton-labs/skeleton-docs/DTiiVWr4oUM5WYY9DYQ4GvpaLKgT)) |  |  | Mar 7, 2025 0:06am |
| **skeleton-next** | ✅ Ready ([Inspect](https://vercel.com/skeleton-labs/skeleton-next/H8Sjgz1FjYWuU1uysNP4MTgwcRNc)) | [Visit Preview](https://skeleton-next-git-docs-improve-navigation-0f3bc1-skeleton-labs.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/skeleton-next-git-docs-improve-navigation-0f3bc1-skeleton-labs.vercel.app?via=pr-comment-feedback-link) | Mar 7, 2025 0:06am |

<details><summary>1 Skipped Deployment</summary>

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **skeleton-themes** | ⬜️ Ignored ([Inspect](https://vercel.com/skeleton-labs/skeleton-themes/7ZCCR8HeLnBrUCyz1Wxhve2sRaiF)) | [Visit Preview](https://skeleton-themes-git-docs-improve-navigatio-b0adc1-skeleton-labs.vercel.app) |  | Mar 7, 2025 0:06am |
</details>




author_association: NONE