# Horizontal & Responsive
> An interactive 10,000-item horizontal virtual list with explicit orientation controls and a responsive breakpoint mode.
**Source:** [https://virtuallist.svelte.page/examples/horizontal](https://virtuallist.svelte.page/examples/horizontal)
**Markdown mirror:** [https://virtuallist.svelte.page/examples/horizontal.md](https://virtuallist.svelte.page/examples/horizontal.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: horizontal by default.
The first render is visibly horizontal. Switch to vertical, or choose auto to let the list change axes at the 640px breakpoint while preserving the keyed viewport anchor.
**Metadata:** tag: `ORIENTATION` | items: `10,000` | axes: `horizontal + vertical` | breakpoint: `640px`
### Source
#### Default.svelte
Source file: [src/lib/examples/horizontal/demos/Default.svelte](https://github.com/humanspeak/svelte-virtual-list/blob/main/docs/src/lib/examples/horizontal/demos/Default.svelte)
```svelte
item.id}
{orientation}
defaultEstimatedItemSize={orientation === 'horizontal' ? 164 : 64}
viewportLabel="Ten thousand item orientation demo"
>
{#snippet renderItem(item)}
{String(item.id + 1).padStart(5, '0')}
{item.label}
{orientation === 'horizontal' ? `${item.width}px wide` : '64px row'}
{/snippet}
Horizontal is the deterministic first render. Choose auto to switch at the 640px breakpoint.
```