Breadcrumb

Show the current page hierarchy and provide paths back to parent pages.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Breadcrumb to show the current page hierarchy. Use Tab for switching peer content and Sidebar for application navigation. The page owns route changes.

items generates the path; the final item automatically becomes the noninteractive current page.
Explicit Button as="item" and Text as="separator" children replace items. parts configures only generated content.
The default navigation name follows LocaleProvider; an explicit ariaLabel takes priority. Path labels and business content remain unchanged.

Import

import { Breadcrumb } from '@snowui-design-system/components';

Usage

Gray variant

Filled variant

Outline variant

Borderless variant

API Reference

Property	Type	Default	Example	Description
`ariaLabel`	`string`	`—`	`ariaLabel="Example"`	Accessible name for the root navigation. When omitted, follows LocaleProvider; an explicit value takes priority.
`gap`	`number`	`—`	`gap={42}`	Inherited Frame gap token index for preferred row and column spacing between path elements. Omit it to retain existing preferences. Effective spacing stays at least 4 CSS px, including zero and font/gap scaling. Larger preferences and ordinary root wrapping are preserved.
`variant`	`BreadcrumbVariant`	`"borderless"`	`variant={value}`	Default Button variant for internal Button as="item". parts or an explicit child Button variant can override it.
`children`	`Snippet`	`—`	`<Breadcrumb>Content</Breadcrumb>`	Explicit Button as="item" and Text as="separator" children, replacing generated items and separator. The last item still becomes the current page.
`items`	`BreadcrumbItem[]`	`[]`	`items={items}`	Path data containing a label and optional href or disabled for each item. Generates Buttons and separator Text; the last item is a noninteractive current page. Ignored when children is provided.
`separator`	`string`	`"/"`	`separator="Example"`	Text between generated path items in items mode. Declare as="separator" yourself when composing explicit children.
`parts`	`ComponentPartsOf<{ Button: typeof Button; Text: typeof Text }>`	`—`	`parts={partsOptions}`	Configure Button and separator Text generated in items mode. Does not affect explicit children; Breadcrumb still owns current-page and role semantics.