# Navigation
A flexible navigation interface for large, medium, and small screens.
## Bar
```svelte
Contents
{#each links as link (link)}
{@const Icon = link.icon}
{link.label}
{/each}
```
* 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
```svelte
{#each links as link (link)}
{@const Icon = link.icon}
{link.label}
{/each}
Contents
```
* 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
```svelte
Home
{#each Object.entries(linksSidebar) as [category, links]}
{category}
{#each links as link (link)}
{@const Icon = link.icon}
{link.label}
{/each}
{/each}
Settings
Contents
```
* 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.
```svelte
{#each links as link (link)}
{@const Icon = link.icon}
{link.label}
{/each}
Layout: {layoutRail ? 'Rail' : 'Sidebar'}
```
## API Reference
| Property | Default | Type |
| -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| layout | bar | "bar" \| "rail" \| "sidebar" \| undefined — Sets the data-layout attribute, which modifies the visual presentation of the component set. |
| element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"header">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"footer">]> \| undefined — Render the element yourself |