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

Users
Janet
image.jpg 
Edit code

Usage

1import React from "react";
2import { Breadcrumb, Breadcrumbs } from "@commure/components-foundation";
3
4function MyBreadcrumbs() {
5  return (
6    <Breadcrumbs
7      currentBreadcrumbRenderer={({ text, ...restProps }) => (
8        <Breadcrumb {...restProps}>
9          {text} <Icon icon="star" />
10        </Breadcrumb>
11      )}
12      items={[
13        { href: "#/users", icon: "folder-close", text: "Users" },
14        { href: "#/users/janet", icon: "folder-close", text: "Janet" },
15        { icon: "document", text: "image.jpg" }
16      ]}
17    />
18  );
19}
20
21export default MyBreadcrumbs;

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