--- title: Breadcrumbs description: Show the current page's location. --- > LoamUI documentation, generated from the same source as the live page — > treat it as authoritative for `@loamui/core`. # Breadcrumbs The path to the current page, with each ancestor a link back up the hierarchy. ## Import ```tsx import { Breadcrumbs } from "@loamui/core"; ``` ## Usage ### Basic Items are links via href; mark the current page explicitly with current. Separators are drawn by CSS, not the DOM. ```tsx Home Settings Billing ``` ### Custom separator Set any glyph once on the Root; CSS draws it between items. ```tsx Home Projects Website Redesign ``` ### With a router link Substitute the built-in with your framework's link via render; the item's wiring (aria-current) merges onto it. ```tsx import Link from "next/link"; }>Home }>Settings Billing ``` ## When to use it - On pages more than two levels deep, so users can step back up the hierarchy. - When the URL structure reflects a real content hierarchy the user can navigate. ## When not to - As a substitute for primary navigation, or on shallow sites where every page is one step from home. - For linear multi-step flows, show progress instead: breadcrumbs describe structure, not position in a sequence. ## How it works ### The current page ends the trail, unlinked The last crumb is the page the user is on: mark it current and give it no href. It then renders as plain text with aria-current="page". A link to the page you are already on is a no-op that costs a click and misleads assistive technology. And never render breadcrumbs on the homepage: there is no path above it to show. The alternative convention (ending the trail at the parent section and letting the page's own heading anchor it) is equally valid; pick one and keep it consistent. ### A trail needs a real hierarchy Breadcrumbs earn their space only when the page sits at least two levels deep in a structure users can climb. One level up is a single destination: a plain 'Back to projects' link says the same thing more simply. Nor are breadcrumbs primary navigation: they show where you are, not where you can go, so they supplement the main nav rather than replace it. ### Truncate or omit before wrapping On narrow screens a long trail wraps onto several lines and pushes the content down. Prefer omitting the trail on mobile, or truncating the middle ('Home / … / Billing'). Because the consumer marks current explicitly rather than the component inferring it from position, a truncated path keeps the right item announced as the current page. ## Accessibility - Renders a