# components/Breadcrumb (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/components/Breadcrumb.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/components/Breadcrumb.tsx).

## 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.

```ts
function Breadcrumb(props: BreadcrumbProps): Element
```

**Parameters**

- `props` (`BreadcrumbProps`): Component props.

**Returns** `Element`

**Props**

- `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.

Source: [ui/src/components/Breadcrumb.tsx:38](https://github.com/Tahul/zidane/blob/main/ui/src/components/Breadcrumb.tsx#L38)

## Interfaces

### `BreadcrumbProps`

Interface.

Props for [`Breadcrumb`](https://zidane.si/docs/reference/ui-components-breadcrumb.md#Breadcrumb).

```ts
interface BreadcrumbProps
```

**Properties**

- `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.

Source: [ui/src/components/Breadcrumb.tsx:18](https://github.com/Tahul/zidane/blob/main/ui/src/components/Breadcrumb.tsx#L18)