# Breadcrumb ```mdx ``` ## Usage Import Tailwind and one full Basecoat style bundle. ```css @import "tailwindcss"; @import "basecoat-css/vega.css"; ``` Or import only the base CSS, Breadcrumb component CSS, and one style pack. ```css @import "tailwindcss"; @import "basecoat-css/base.css"; @import "basecoat-css/components/breadcrumb.css"; @import "basecoat-css/styles/vega.css"; ``` Using CDN or bundler imports? See the [Installation page](/installation). Use a navigation landmark with an ordered list. Mark the current page with `aria-current="page"`. ```html ``` ## HTML structure - `nav.breadcrumb` is the root landmark and should include `aria-label="Breadcrumb"`. - `ol` contains the breadcrumb items in hierarchy order. - `li > a` represents navigable ancestors. - `li[aria-hidden="true"]` represents a visual separator. - `[aria-current="page"]` represents the current page. - `li > span[aria-hidden="true"]` represents a collapsed ellipsis. ## Examples ### Basic ```mdx ``` ### Custom separator ```mdx ``` ### Dropdown ```mdx ``` ### Collapsed ```mdx ``` ### RTL ```mdx ```