# Navigation
A flexible navigation interface for large, medium, and small screens.

## Bar

```tsx

	const links = [
		{ label: 'Home', href: '#', icon: HouseIcon },
		{ label: 'Books', href: '#', icon: BookIcon },
		{ label: 'Movies', href: '#', icon: PopcornIcon },
		{ label: 'Television', href: '#', icon: TvIcon },
	];
	let anchorBar = 'btn hover:preset-tonal flex-col items-center gap-1';

	return (
		<div className="w-[375px] h-[667px] grid grid-rows-[1fr_auto] border border-surface-200-800">
			<div className="flex justify-center items-center">
				<p>Contents</p>
			</div>
			<Navigation layout="bar">
				<Navigation.Menu className="grid grid-cols-4 gap-2">
					{links.map((link) => {
						const Icon = link.icon;
						return (
							<a key={link.label} href={link.href} className={anchorBar}>
								<Icon className="size-5" />
								<span className="text-xs">{link.label}</span>
							</a>
						);
					})}
				</Navigation.Menu>
			</Navigation>
		</div>
	);
}

```

- Recommended for small sized screens (ex: mobile).
- Ideal for vertical screen layouts.
- Should be fixed to the bottom of the viewport.
- Supports 3-5 tiles based on contents and viewport width.
- Consider progressive enhancement with the [Virtual Keyboard API](https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard_API).

## Rail

```tsx

	const links = [
		{ label: 'Home', href: '#', icon: HouseIcon },
		{ label: 'Books', href: '#', icon: BookIcon },
		{ label: 'Movies', href: '#', icon: PopcornIcon },
		{ label: 'Television', href: '#', icon: TvIcon },
	];
	let anchorRail = 'btn hover:preset-tonal aspect-square w-full max-w-[84px] flex flex-col items-center gap-0.5';

	return (
		<div className="w-full h-[728px] grid grid-cols-[auto_1fr] border border-surface-200-800">
			<Navigation layout="rail">
				<Navigation.Header>
					<a href="/" className={anchorRail} title="View Homepage" aria-label="View Homepage">
						<SkullIcon className="size-8" />
					</a>
				</Navigation.Header>
				<Navigation.Content>
					<Navigation.Menu>
						{links.map((link) => {
							const Icon = link.icon;
							return (
								<a key={link.label} href={link.href} className={anchorRail}>
									<Icon className="size-5" />
									<span className="text-xs">{link.label}</span>
								</a>
							);
						})}
					</Navigation.Menu>
				</Navigation.Content>
				<Navigation.Footer>
					<a href="/settings" className={anchorRail} title="Settings" aria-label="Settings">
						<SettingsIcon className="size-5" />
					</a>
				</Navigation.Footer>
			</Navigation>
			<div className="flex justify-center items-center">
				<p className="opacity-50">Contents</p>
			</div>
		</div>
	);
}

```

- Recommended for medium sized screens (ex: tablet).
- Ideal for horizontal screen layouts.
- Should be fixed to the left or right of the viewport.
- Supports 3-7 tiles based on contents and viewport height.

## Sidebar

```tsx

	const linksSidebar = {
		entertainment: [
			{ label: 'Books', href: '#', icon: BookIcon },
			{ label: 'Movies', href: '#', icon: PopcornIcon },
			{ label: 'Television', href: '#', icon: TvIcon },
		],
		recreation: [
			{ label: 'Biking', href: '#', icon: BikeIcon },
			{ label: 'Sailing', href: '#', icon: SailboatIcon },
			{ label: 'Hiking', href: '#', icon: MountainIcon },
			{ label: 'Swimming', href: '#', icon: WavesIcon },
		],
	};
	let anchorSidebar = 'btn hover:preset-tonal justify-start px-2 w-full';

	return (
		<div className="w-full h-[728px] grid grid-cols-[auto_1fr] items-stretch border border-surface-200-800">
			<Navigation layout="sidebar" className="grid grid-rows-[auto_1fr_auto] gap-4">
				<Navigation.Header>
					<a href="https://www.skeleton.dev" className="btn-icon btn-icon-lg preset-filled-primary-500">
						<SkullIcon className="size-6" />
					</a>
				</Navigation.Header>
				<Navigation.Content>
					<Navigation.Group>
						<Navigation.Menu>
							<a href="/" className={anchorSidebar}>
								<HouseIcon className="size-4" />
								<span>Home</span>
							</a>
						</Navigation.Menu>
					</Navigation.Group>
					{Object.entries(linksSidebar).map(([category, links]) => (
						<Navigation.Group key={category}>
							<Navigation.Label className="capitalize pl-2">{category}</Navigation.Label>
							<Navigation.Menu>
								{links.map((link) => {
									const Icon = link.icon;
									return (
										<a key={link.label} className={anchorSidebar} title={link.label} aria-label={link.label}>
											<Icon className="size-4" />
											<span>{link.label}</span>
										</a>
									);
								})}
							</Navigation.Menu>
						</Navigation.Group>
					))}
				</Navigation.Content>
				<Navigation.Footer>
					<a href="/" className={anchorSidebar} title="Settings" aria-label="Settings">
						<SettingsIcon className="size-4" />
						<span>Settings</span>
					</a>
				</Navigation.Footer>
			</Navigation>
			<div className="flex justify-center items-center">
				<p className="opacity-50">Contents</p>
			</div>
		</div>
	);
}

```

- Recommended for large sized screens (ex: desktop).
- Ideal for horizontal screen layouts.
- Should be fixed to the left or right of the viewport.
- Supports multiple groups of links for deep navigation.
- Supports a label field per each group.
- Can scroll vertically if contents extend beyond the viewport height.

## Toggle Layout

Using reactive state we can dynamically switch between multiple layouts. Tap the double arrow icon to toggle.

```tsx

	const links = [
		{ label: 'Home', href: '#', icon: HouseIcon },
		{ label: 'Books', href: '#', icon: BookIcon },
		{ label: 'Movies', href: '#', icon: PopcornIcon },
		{ label: 'Television', href: '#', icon: TvIcon },
	];

	const buttonClasses = 'btn hover:preset-tonal';
	let anchorRail = `${buttonClasses} aspect-square w-full max-w-[84px] flex flex-col items-center gap-0.5`;
	let anchorSidebar = `${buttonClasses} justify-start px-2 w-full`;

	let [layoutRail, setLayoutRail] = useState(true);

	function toggleLayout() {
		setLayoutRail(!layoutRail);
	}

	return (
		<div className="w-full h-[728px] grid grid-cols-[auto_1fr] items-stretch border border-surface-200-800">
			<Navigation layout={layoutRail ? 'rail' : 'sidebar'} className={layoutRail ? '' : 'grid grid-rows-[1fr_auto] gap-4'}>
				<Navigation.Content>
					<Navigation.Menu>
						{links.map((link) => {
							const Icon = link.icon;
							return (
								<a key={link.label} className={layoutRail ? anchorRail : anchorSidebar}>
									<Icon className={layoutRail ? 'size-5' : 'size-4'} />
									<span className={layoutRail ? 'text-[10px]' : ''}>{link.label}</span>
								</a>
							);
						})}
					</Navigation.Menu>
				</Navigation.Content>
				<Navigation.Footer>
					<button type="button" className={layoutRail ? anchorRail : anchorSidebar} onClick={toggleLayout}>
						<ArrowLeftRightIcon className={layoutRail ? 'size-5' : 'size-4'} />
						{!layoutRail ? <span>Resize</span> : ''}
					</button>
				</Navigation.Footer>
			</Navigation>
			<div className="flex justify-center items-center">
				<p className="opacity-50">Contents</p>
			</div>
		</div>
	);
}

```

## API Reference

### NavigationRoot

| Property | Type | Description |
| --- | --- | --- |
| `layout` | "bar" | "rail" | "sidebar" | undefined | Sets the data-layout attribute, which modifies the visual presentation of the component set. Default: bar |
| `element` | ((attributes: HTMLAttributes<"div">) => Element) | undefined | Render the element yourself |

### NavigationHeader

| Property | Type | Description |
| --- | --- | --- |
| `element` | ((attributes: HTMLAttributes<"header">) => Element) | undefined | Render the element yourself |

### NavigationContent

| Property | Type | Description |
| --- | --- | --- |
| `element` | ((attributes: HTMLAttributes<"div">) => Element) | undefined | Render the element yourself |

### NavigationGroup

| Property | Type | Description |
| --- | --- | --- |
| `element` | ((attributes: HTMLAttributes<"div">) => Element) | undefined | Render the element yourself |

### NavigationLabel

| Property | Type | Description |
| --- | --- | --- |
| `element` | ((attributes: HTMLAttributes<"div">) => Element) | undefined | Render the element yourself |

### NavigationMenu

| Property | Type | Description |
| --- | --- | --- |
| `element` | ((attributes: HTMLAttributes<"div">) => Element) | undefined | Render the element yourself |

### NavigationFooter

| Property | Type | Description |
| --- | --- | --- |
| `element` | ((attributes: HTMLAttributes<"footer">) => Element) | undefined | Render the element yourself |