UIDex

Breadcrumbs

مسار التنقّل

aria-current="page"

also calledbreadcrumb trail، breadcrumb navigation، path bar، location trail، فتات الخبز، شريط المسار، مسار الصفحة، دليل التسلسل، خط السير

Breadcrumbs are a row of links that show where the current page sits in the site tree, from the root down to the page you are on. The last item is the current page itself: usually not a link, and marked with aria-current="page". The trail mirrors the site hierarchy, not the visitor's browsing history; a list of previously visited pages is a history trail, not a breadcrumb. It is not a stepper: steps are a journey with a beginning, an end, and a time order. It is not tabs, which are peers at the same level, and not pagination, which moves between equal slices of one collection.

If you called it…

"the little links above the page title""the home > category > product line""the arrows between page names""the trail that shows where I am""that path thing with slashes"

Live specimen

Interact with the demo. Every part is real and numbered.

RTLالسهم منعكس تلقائياً، جرّب تبديل اللغة من الأعلى

Anatomy: every part, named

Hover a row to locate it in the demo above.

Build prompt

Build a breadcrumb trail inside <nav aria-label="Breadcrumb">. It holds an <ol> of levels, and each <li> has a link, except the last one, which is plain text carrying aria-current="page". Put a decorative separator between items with aria-hidden="true", rendered as an SVG icon that flips with scaleX(-1) under [dir="rtl"]. Space items with gap, never margin-right. If there are more than four levels, collapse the middle ones behind a "…" button, and keep the root and the current page visible. Wrap any Latin segment of a title in <bdi>. Add schema.org BreadcrumbList structured data.

How it behaves right-to-left

This section is ours alone.

Trail direction

mirrors

The whole trail mirrors: the root starts at the right and the current page ends at the left. Do not space items with margin-right. Use gap or margin-inline-start so one rule serves both directions.

The chevron separator

mirrors

The most common bug in an Arabic breadcrumb is the chevron. A literal › character will not flip on its own and ends up pointing the wrong way. Fix it with an SVG icon plus transform: scaleX(-1) under [dir="rtl"], or pick a direction-neutral separator such as / or ·.

Latin names inside an Arabic trail

never mirrors

The bidi algorithm reorders a trail like "الرئيسية / لوحة التحكم / users / admin-panel" on screen. Wrap every Latin segment in <bdi>, or in a span with dir="ltr" and unicode-bidi: isolate. The same applies to IDs and numbers such as #1042.

Collapsing and truncation

mirrors

text-overflow: ellipsis cuts at the logical end, which in Arabic is the left edge. That part is correct by default. A hard-coded padding-left/right will look lopsided once the page flips, so use padding-inline.

In code

Each row is one framework's word for the same thing. Take the row your project speaks.

ARIAaria-current="page"Goes on the last item only, which is the current page.
HTML<nav aria-label> + <ol>A named navigation landmark around an ordered list, because order carries meaning.
Material UI<Breadcrumbs separator="›" maxItems={4}>Automatic collapsing via maxItems and itemsBeforeCollapse.
Ant Design<Breadcrumb items={items} />Each entry is an object with title and href; separator is set per component.
shadcn/ui<Breadcrumb><BreadcrumbList>…Compound parts: BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbPage, BreadcrumbEllipsis.
schema.orgBreadcrumbListThe structured data that makes Google print the trail instead of the raw URL in a result.
CSS[dir="rtl"] .sep { transform: scaleX(-1) }The practical way to mirror the chevron when the page flips.

See also

WebSteps / StepperWebToast

Updated · 2026-08-19