# Breadcrumb > A nav with an ordered list of links and aria-current="page" on the last one. Page: https://svelte-lean.vercel.app/primitives/breadcrumb · Markdown: https://svelte-lean.vercel.app/primitives/breadcrumb.md · Index: https://svelte-lean.vercel.app/llms.txt An ordered list of links from the site root to the current page. Use it to show where a page sits in a hierarchy. ```svelte ``` The separators are drawn in CSS and never announced; turn on RTL to see them mirror. ## Examples ### Collapsed levels ```svelte ``` A long trail keeps its ends; the middle levels open from a button. ### Home icon ```svelte ``` The SVG is hidden; the link keeps its name. ### Current page as text ```svelte ``` When the current page should not be a link, a span is styled the same way. ### Trail from the route ```svelte ``` One level per path segment; this is the trail of the page you are reading. ## Usage Plain markup with a stylesheet: install `@svelte-lean/styles`. No JavaScript runs. ```bash npm install @svelte-lean/styles ``` `stylesheets` ```ts import '@svelte-lean/styles/breadcrumb.css'; ``` Name the landmark with `aria-label="Breadcrumb"` (or `aria-labelledby`), list the levels in an `
    ` directly inside it, and mark the last item with `aria-current="page"`. A page with several breadcrumbs gives each its own name. Do not type separators into the markup; the stylesheet draws them. ## Anatomy | Part | Element | data-slean-part | Required | Notes | | --- | --- | --- | --- | --- | | root | `