Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Anatomy
  • Examples
  • Workspace resources
  • With icons
  • Collapsed ancestors
  • Custom separator
  • Long labels
  • Recommendations
  • Usage boundaries
  • API reference

Navigation

Breadcrumb

Shows the path to the current resource using native links.

idle

Usage

import {
	Breadcrumb,
	BreadcrumbItem,
	BreadcrumbLink,
	BreadcrumbList,
	BreadcrumbPage,
	BreadcrumbSeparator,
} from "@mizen-labs/ui";

Anatomy

The parts and how they nest, taken from the preview above.

<Breadcrumb>
	<BreadcrumbList>
		<BreadcrumbItem>
			<BreadcrumbLink />
		</BreadcrumbItem>
		<BreadcrumbSeparator />
		<BreadcrumbItem>
			<BreadcrumbLink />
		</BreadcrumbItem>
		<BreadcrumbSeparator />
		<BreadcrumbItem>
			<BreadcrumbPage />
		</BreadcrumbItem>
	</BreadcrumbList>
</Breadcrumb>

Examples

Workspace resources

With icons

Compose decorative icons with ancestor links and the current page.

Collapsed ancestors

An accessible menu reveals omitted links.

Custom separator

Supply slash separators through children.

Long labels

Resource identifiers wrap within narrow containers.

Recommendations

GuidancePractice
Do

Show meaningful ancestors and name the current resource. Use real destinations for ancestor links.

Do

Place decorative icons beside text as children. Give icon-only links and collapsed Menu triggers an accessible name.

Usage boundaries

GuidanceBoundary
Scope

Breadcrumbs describe hierarchy, not browser history. Do not make the current page a redundant navigation action.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
BreadcrumbBreadcrumbPropsaria-label="breadcrumb"Native navigation props, refs, and styling.
BreadcrumbListBreadcrumbListProps—Native ordered list props with wrapping and quiet typography.
BreadcrumbItemBreadcrumbItemProps—Native list-item props and inline icon alignment.
BreadcrumbLinkBreadcrumbLinkProps—Native anchor props, styling, refs, and render composition for framework links.
BreadcrumbPageBreadcrumbPagePropsaria-current="page"Native span props for the current location, including icon children.
BreadcrumbSeparatorBreadcrumbSeparatorPropsChevronNative list-item props. Custom children replace the hidden separator icon.
BreadcrumbEllipsisBreadcrumbEllipsisPropsDotsDecorative indicator. Name the enclosing menu trigger when revealing omitted ancestors.
PreviousTime InputNextMenubar
  1. Home
  3. Components
  5. Calendar
  1. Home
  3. Components
  5. Navigation and progress

Navigation and progress

Patterns for finding your place, moving through records, and completing a task.

  1. Home
  3. Docs
  5. Breadcrumb
  1. Home
  5. Breadcrumb
  1. Home
  2. /
  3. Docs
  4. /
  5. Breadcrumb
  1. Documentation
  3. workspace_permissions_production_europe_west_revision_1842