Breadcrumbs
Introduction
Breadcrumbs
identify the path to the current resource in an application.
The Breadcrumbs
component requires an items
array of breadcrumb props and renders them in an OverflowList
to automatically collapse
breadcrumbs that do not fit in the available space.
The below information is a snippet from the
related section in the Blueprint reference documentation.
Examples
Usage
API Reference
Breadcrumbs
Prop Name | Required? | Type | Description |
---|---|---|---|
breadcrumbRenderer | false | (props: IBreadcrumbProps) => Element | Callback invoked to render visible breadcrumbs. Best practice is to render a `<Breadcrumb>` element. If `currentBreadcrumbRenderer` is also supplied, that callback will be used for the current breadcrumb instead. |
className | false | string | A space-delimited list of class names to pass along to a child element. |
collapseFrom | false | Boundary | Which direction the breadcrumbs should collapse from: start or end. |
currentBreadcrumbRenderer | false | (props: IBreadcrumbProps) => Element | Callback invoked to render the current breadcrumb, which is the last element in the `items` array. If this prop is omitted, `breadcrumbRenderer` will be invoked for the current breadcrumb instead. |
items | true | IBreadcrumbProps[] | All breadcrumbs to display. Breadcrumbs that do not fit in the container will be rendered in an overflow menu instead. |
minVisibleItems | false | number | The minimum number of visible breadcrumbs that should never collapse into the overflow menu, regardless of DOM dimensions. |
overflowListProps | false | Partial<IOverflowListProps<IBreadcrumbProps>> | Props to spread to `OverflowList`. Note that `items`, `overflowRenderer`, and `visibleItemRenderer` cannot be changed. |
popoverProps | false | IPopoverProps | Props to spread to the `Popover` showing the overflow menu. |
Breadcrumb
Prop Name | Required? | Type | Description |
---|---|---|---|
className | false | string | A space-delimited list of class names to pass along to a child element. |
current | false | boolean | Whether this breadcrumb is the current breadcrumb. |
disabled | false | boolean | Whether this action is non-interactive. |
href | false | string | Link URL. |
icon | false | IconName | MaybeElement | Name of a Blueprint UI icon (or an icon element) to render before the text. |
intent | false | Intent | Visual intent color to apply to element. |
onClick | false | (event: MouseEvent<HTMLElement>) => void | Click event handler. |
target | false | string | Link target attribute. Use `"_blank"` to open in a new window. |
text | false | React.ReactNode | Action text. Can be any single React renderable. |
Related Reading
Blueprint Reference