Breadcrumb

Navigation landmark for a breadcrumb trail; renders a labelled <nav>.

Usage

import { Breadcrumb, breadcrumbAnatomy, BreadcrumbCurrent, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator } from "@instruments/materia-ui/components/breadcrumb";

Best practices

When the trail sits directly above the page heading, stop at the last navigable ancestor and let the heading name the current page. Use BreadcrumbCurrent only when no adjacent heading supplies that context.
Render router links via <BreadcrumbLink render={<Link href="…" />}> with a framework <Link> - the bare default is an <a>.
Collapse overflow with BreadcrumbEllipsis hosting a menu of the hidden crumbs, rather than dropping items silently.

Props

Prop	Type	Default	Description
separator	`React.ReactNode`

Also exports

constbreadcrumbAnatomy
componentBreadcrumbCurrent
componentBreadcrumbEllipsis
componentBreadcrumbItem
componentBreadcrumbLink
componentBreadcrumbList
componentBreadcrumbSeparator

Anatomy

Breadcrumb

breadcrumb

Navigation showing current location in hierarchy

BreadcrumbList

breadcrumb-list

Container for breadcrumb items

BreadcrumbItem

breadcrumb-item

Single breadcrumb entry

BreadcrumbLink

breadcrumb-link

Clickable link

BreadcrumbCurrent

breadcrumb-page

Current page (non-link)

BreadcrumbSeparator

breadcrumb-separator

Visual divider

BreadcrumbEllipsis

breadcrumb-ellipsis

Collapsed items indicator

Composition

Builds on

Center, Flex, Icon, VisuallyHidden