export default function Default() {
return (
<ol className="flex items-center gap-4">
<li>
<a className="opacity-60 hover:underline" href="#">
Blog
</a>
</li>
<li className="opacity-50" aria-hidden>
›
</li>
<li>
<a className="opacity-60 hover:underline" href="#">
Category
</a>
</li>
<li className="opacity-50" aria-hidden>
›
</li>
<li>Article</li>
</ol>
);
}<ol class="flex items-center gap-4">
<li><a class="opacity-60 hover:underline" href="#">Blog</a></li>
<li class="opacity-50" aria-hidden>›</li>
<li><a class="opacity-60 hover:underline" href="#">Category</a></li>
<li class="opacity-50" aria-hidden>›</li>
<li>Article</li>
</ol>Icons
Feel free to mix in icons for the anchor labels or separators.
import { ChevronRightIcon, CogIcon, HouseIcon } from 'lucide-react';
export default function Icons() {
return (
<ol className="flex items-center gap-4">
<li>
<a className="opacity-60 hover:opacity-100" href="#">
<HouseIcon size={24} />
</a>
</li>
<li className="opacity-50" aria-hidden>
<ChevronRightIcon size={14} />
</li>
<li>
<a className="opacity-60 hover:opacity-100" href="#">
<CogIcon size={24} />
</a>
</li>
<li className="opacity-50" aria-hidden>
<ChevronRightIcon size={14} />
</li>
<li>Current</li>
</ol>
);
}<script lang="ts">
import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
import CogIcon from '@lucide/svelte/icons/cog';
import HouseIcon from '@lucide/svelte/icons/house';
</script>
<ol class="flex items-center gap-4">
<li>
<a class="opacity-60 hover:opacity-100" href="#">
<HouseIcon size={24} />
</a>
</li>
<li class="opacity-50" aria-hidden>
<ChevronRightIcon size={14} />
</li>
<li>
<a class="opacity-60 hover:opacity-100" href="#">
<CogIcon size={24} />
</a>
</li>
<li class="opacity-50" aria-hidden>
<ChevronRightIcon size={14} />
</li>
<li>Current</li>
</ol>