# Breadcrumb > A navigation trail showing the current page location within a hierarchy Status: stable. Added in Components 2.0.0. A navigation trail showing the current page location within a hierarchy. ## Import ```tsx import { Breadcrumb } from '@oztix/roadie-components/breadcrumb' ``` ## Examples ### Default ```tsx Home Components Breadcrumb ``` ### Composition Use `Breadcrumb.List`, `Breadcrumb.Item`, `Breadcrumb.Link`, `Breadcrumb.Separator`, and `Breadcrumb.Current` to build the trail. The last item uses `Breadcrumb.Current` instead of a link. #### With custom separator Pass a custom character or element to `Breadcrumb.Separator`. ```tsx Home {'>'} Settings {'>'} Profile ``` ### With custom component Pass `render` on `Breadcrumb.Link` to use a custom component like Next.js `Link`. For internal routes you can also just pass `href` and let the `RoadieLinkProvider` route it. ```tsx import Link from 'next/link' }>Home Current page ``` ### Truncation Items never wrap. When the row runs out of room each item truncates with an ellipsis, while the separators stay put. Constrain the width to see it. ```tsx
Home A long category name An even longer current page title
``` ## Accessibility - **Landmark**: Renders as a `