Components · Navigation rail · Use
Navigation rail

Choose a configuration and copy the result.
State
Markup

<script lang="ts">
	import HomeIcon from '@lucide/svelte/icons/home';
	import PaletteIcon from '@lucide/svelte/icons/palette';
	import TypeIcon from '@lucide/svelte/icons/type';
</script>

<nav class="navigation-rail-root" aria-label="Sections">
	<a id="navigation-home" class="navigation-rail-item" href="#navigation-home">
		<HomeIcon class="navigation-rail-icon" aria-hidden="true" />
		<span class="navigation-rail-label">Home</span>
		<span class="navigation-rail-indicator"></span>
	</a>
	<a
		id="navigation-colors"
		class="navigation-rail-item"
		href="#navigation-colors"
		aria-current="page"
	>
		<PaletteIcon class="navigation-rail-icon" aria-hidden="true" />
		<span class="navigation-rail-label">Colors</span>
		<span class="navigation-rail-indicator"></span>
	</a>
	<a id="navigation-typography" class="navigation-rail-item" href="#navigation-typography">
		<TypeIcon class="navigation-rail-icon" aria-hidden="true" />
		<span class="navigation-rail-label">Typography</span>
		<span class="navigation-rail-indicator"></span>
	</a>
</nav>