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.

Examples

Usage

import React from "react";
import { Breadcrumb, Breadcrumbs } from "@commure/components-foundation";
function MyBreadcrumbs() {
return (
<Breadcrumbs
currentBreadcrumbRenderer={({ text, ...restProps }) => <Breadcrumb {...restProps}>{text} <Icon icon="star" /></Breadcrumb>}
items={[
{ href: "#/users", icon: "folder-close", text: "Users" },
{ href: "#/users/janet", icon: "folder-close", text: "Janet" },
{ icon: "document", text: "image.jpg" },
]}
/>
);
}
export default MyBreadcrumbs;

API Reference

Breadcrumbs

Prop NameRequired?TypeDescription
breadcrumbRendererfalse(props: IBreadcrumbProps) => ElementCallback 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.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
collapseFromfalseBoundaryWhich direction the breadcrumbs should collapse from: start or end.
currentBreadcrumbRendererfalse(props: IBreadcrumbProps) => ElementCallback 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.
itemstrueIBreadcrumbProps[]All breadcrumbs to display. Breadcrumbs that do not fit in the container will be rendered in an overflow menu instead.
minVisibleItemsfalsenumberThe minimum number of visible breadcrumbs that should never collapse into the overflow menu, regardless of DOM dimensions.
overflowListPropsfalsePartial<IOverflowListProps<IBreadcrumbProps>>Props to spread to `OverflowList`. Note that `items`, `overflowRenderer`, and `visibleItemRenderer` cannot be changed.
popoverPropsfalseIPopoverPropsProps to spread to the `Popover` showing the overflow menu.

Breadcrumb

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to a child element.
currentfalsebooleanWhether this breadcrumb is the current breadcrumb.
disabledfalsebooleanWhether this action is non-interactive.
hreffalsestringLink URL.
iconfalseIconName | MaybeElementName of a Blueprint UI icon (or an icon element) to render before the text.
intentfalseIntentVisual intent color to apply to element.
onClickfalse(event: MouseEvent<HTMLElement>) => voidClick event handler.
targetfalsestringLink target attribute. Use `"_blank"` to open in a new window.
textfalseReact.ReactNodeAction text. Can be any single React renderable.

Related Reading

Blueprint Reference