Breadcrumb
Shows a page's location within the application hierarchy and provides links to each level.
On this page
This docs is LLM-friendly and available as clean Markdown.
Supported browser agents can also use WebMCP to search, read, and open these docs. Learn more
Usage
import {
GlBreadcrumb,
GlBreadcrumbItem,
} from "gitlab-ui-react/breadcrumb";<GlBreadcrumb>
<GlBreadcrumbItem href="#apple">Apple</GlBreadcrumbItem>
<GlBreadcrumbItem href="#banana">Banana</GlBreadcrumbItem>
</GlBreadcrumb>Default
Use a breadcrumb to show the current page’s hierarchy. Every item, including the current page, is a link; the final link automatically receives aria-current="page".
import {
GlBreadcrumb,
GlBreadcrumbItem,
} from "gitlab-ui-react/breadcrumb";
export default function BreadcrumbExample() {
return (
<GlBreadcrumb>
<GlBreadcrumbItem href="#nocpiun">Nocpiun</GlBreadcrumbItem>
<GlBreadcrumbItem href="#opanel">OPanel</GlBreadcrumbItem>
<GlBreadcrumbItem href="#issues">Issues</GlBreadcrumbItem>
<GlBreadcrumbItem href="#issue-123">#123</GlBreadcrumbItem>
</GlBreadcrumb>
);
}
Responsive collapse
By default, leading items collapse into a disclosure menu when the path no longer fits on one line. Keep autoResize enabled for page breadcrumbs; disable it only when the surrounding layout intentionally handles overflow.
import {
GlBreadcrumb,
GlBreadcrumbItem,
} from "gitlab-ui-react/breadcrumb";
export default function BreadcrumbResponsiveExample() {
return (
<div className="max-w-72">
<GlBreadcrumb>
<GlBreadcrumbItem href="#nocpiun">Nocpiun</GlBreadcrumbItem>
<GlBreadcrumbItem href="#opanel">OPanel</GlBreadcrumbItem>
<GlBreadcrumbItem href="#repository">Repository</GlBreadcrumbItem>
<GlBreadcrumbItem href="#branches">Branches</GlBreadcrumbItem>
<GlBreadcrumbItem href="#main">main</GlBreadcrumbItem>
</GlBreadcrumb>
</div>
);
}
Copying the path
Set showClipboardButton to let users copy the slash-delimited path. Use pathToCopy when the copied value should differ from the visible labels, and localize clipboardTooltipText.
import {
GlBreadcrumb,
GlBreadcrumbItem,
} from "gitlab-ui-react/breadcrumb";
export default function BreadcrumbClipboardExample() {
return (
<GlBreadcrumb
clipboardTooltipText="Copy project path"
pathToCopy="Nocpiun/OPanel/Issues/#123"
showClipboardButton>
<GlBreadcrumbItem href="#nocpiun">Nocpiun</GlBreadcrumbItem>
<GlBreadcrumbItem href="#opanel">OPanel</GlBreadcrumbItem>
<GlBreadcrumbItem href="#issues">Issues</GlBreadcrumbItem>
<GlBreadcrumbItem href="#issue-123">#123</GlBreadcrumbItem>
</GlBreadcrumb>
);
}
Accessibility
GlBreadcrumbrenders anavlandmark containing an ordered list. Give each breadcrumb on a page a distinctaria-labelwhen more than one exists.- Keep every item as a meaningful link. The last item remains focusable and automatically receives
aria-current="page". - Pass canonical text directly to each
GlBreadcrumbItem; that text is reused in the overflow menu and copied path. - Localize
showMoreLabelandclipboardTooltipTextso icon-only controls have useful accessible names. - Avatars are decorative and hidden from assistive technology. Do not rely on them instead of the item’s text.
API
These are the component-specific props. GlBreadcrumb and GlBreadcrumbItem also forward supported attributes and refs to their nav and li elements.
GlBreadcrumb
| Prop | Description | Default |
|---|---|---|
children |
Accepts direct GlBreadcrumbItem children; arrays, fragments, and conditional items are supported. |
— |
aria-label |
Names the breadcrumb navigation landmark. | "Breadcrumb" |
autoResize |
Collapses leading items into a disclosure menu when space is limited. | true |
size |
Sets the items and controls to sm or md; use sm for page breadcrumbs. |
"sm" |
showMoreLabel |
Labels the collapsed-items trigger for assistive technology. | "Show more breadcrumbs" |
showClipboardButton |
Adds a button that copies the breadcrumb path. | false |
pathToCopy |
Overrides the copied path; otherwise item text is joined with /. |
— |
clipboardTooltipText |
Labels the copy button and its tooltip. | "Copy to clipboard" |
GlBreadcrumbItem
| Prop | Description | Default |
|---|---|---|
children |
Required canonical text used by the link, overflow item, and copied path. | — |
href |
Required unless render is provided; sets the link destination. |
— |
render |
Required unless href is provided; composes onto a router link. |
— |
avatarPath |
Adds a decorative group or project avatar before the text. | — |