UI kit reference

components/Breadcrumb

import { … } from 'zidane-ui'ui/src/components/Breadcrumb.tsx

Breadcrumb (long path truncates left)

EditableTitle (double-click)

Rate limit the chat endpoint

DiffCounts, RowBadge, Highlighted

+14−2+120−8mergeddraft3 filessession-title.ts

SegmentSpinner

ZidaneMark

Components#

`Breadcrumb`Component#

Renders a file path as a row of crumbs. Each folder is a button that calls onFolder; the last segment is the file name, emphasised, and calls onFile. A long path clips from the left under a fade so the name stays visible. The full path is the tooltip.

TypeScript

function Breadcrumb(props: BreadcrumbProps): Element

Parameters

Parameters
Name	Type	Description
props	`BreadcrumbProps`	Component props.

Returns

Element

Props

Breadcrumb props
Name	Type	Description
className?	`string`	Extra classes on the root element.
onFile	`() => void`	Called when the file name crumb is clicked.
onFolder	`(dir: string) => void`	Called with the folder path up to the clicked crumb (`src`, `src/sub`).
path	`string`	Slash-separated file path, for example `src/FilesTab.tsx`.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.

ui/src/components/Breadcrumb.tsx:38

Interfaces#

`BreadcrumbProps`Interface#

Props for Breadcrumb.

TypeScript

interface BreadcrumbProps

Properties

BreadcrumbProps properties
Name	Type	Description
className?	`string`	Extra classes on the root element.
onFile	`() => void`	Called when the file name crumb is clicked.
onFolder	`(dir: string) => void`	Called with the folder path up to the clicked crumb (`src`, `src/sub`).
path	`string`	Slash-separated file path, for example `src/FilesTab.tsx`.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.

ui/src/components/Breadcrumb.tsx:18