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

## Bar

```svelte
// Error loading file, please report this issue.
```

- 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
// Error loading file, please report this issue.
```

- 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
// Error loading file, please report this issue.
```

- 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
// Error loading file, please report this issue.
```

## 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` | Snippet<[HTMLAttributes<"div">]>, undefined | Render the element yourself |

### NavigationHeader

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"header">]>, undefined | Render the element yourself |

### NavigationContent

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"div">]>, undefined | Render the element yourself |

### NavigationGroup

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"div">]>, undefined | Render the element yourself |

### NavigationLabel

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"div">]>, undefined | Render the element yourself |

### NavigationMenu

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"div">]>, undefined | Render the element yourself |

### NavigationFooter

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"footer">]>, undefined | Render the element yourself |