# Breadcrumbs

Displays the current navigation hierarchy.

```tsx
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>
				&rsaquo;
			</li>
			<li>
				<a className="opacity-60 hover:underline" href="#">
					Category
				</a>
			</li>
			<li className="opacity-50" aria-hidden>
				&rsaquo;
			</li>
			<li>Article</li>
		</ol>
	);
}

```

## Icons

Feel free to mix in icons for the anchor labels or separators.

```tsx
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>
	);
}

```