Breadcrumb

Exports

Import these components from @mbsw/ui.

Breadcrumb

BreadcrumbItem

BreadcrumbSeparator

Props

The tables list common props for each component. See the full types for supported prop combinations and inherited HTML and Radix props.

Breadcrumb props
Prop	Type	Requirement
`aria-label` Defines a string value that labels the current element.	`string`	Conditional
`aria-labelledby` Identifies the element (or elements) that labels the current element.	`string`	Conditional
`children`	`ReactNode`	Required

BreadcrumbItem

BreadcrumbItem props
Prop	Type	Requirement
`className`	`string`	Optional
`keyNumber`	`string`	Optional
`label`	`string`	Required
`leading`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	Optional
`asChild`	`boolean`	Conditional
`children`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	Conditional
`current`	`boolean`	Conditional
`href`	`string`	Conditional

Type reference

Show full types

Full TypeScript definitions, including prop combinations and inherited props.

import { type AnchorHTMLAttributes, type HTMLAttributes, type ReactElement, type ReactNode } from 'react';

type DataAttributes = {
    [key: `data-${string}`]: boolean | number | string | undefined;
};

type AccessibleName = {
    'aria-label': string;
    'aria-labelledby'?: string;
} | {
    'aria-label'?: string;
    'aria-labelledby': string;
};

type ReactEventHandlerProp<T> = {
    [Property in keyof T]-?: Property extends `on${string}` ? Property : never;
}[keyof T];

export type BreadcrumbProps = Omit<HTMLAttributes<HTMLElement>, 'aria-hidden' | 'children' | 'contentEditable' | 'dangerouslySetInnerHTML' | 'role'> & DataAttributes & AccessibleName & {
    'aria-hidden'?: never;
    children: ReactNode;
    contentEditable?: never;
    'data-depth'?: never;
    'data-slot'?: never;
    role?: never;
};

type BreadcrumbItemSharedProps = DataAttributes & {
    className?: string;
    'data-current'?: never;
    'data-slot'?: never;
    keyNumber?: string;
    label: string;
    leading?: ReactElement;
};

type BreadcrumbCurrentItemProps = BreadcrumbItemSharedProps & Omit<HTMLAttributes<HTMLSpanElement>, 'aria-current' | 'aria-hidden' | 'children' | 'className' | 'contentEditable' | 'dangerouslySetInnerHTML' | ReactEventHandlerProp<HTMLAttributes<HTMLSpanElement>> | 'onClick' | 'onKeyDown' | 'tabIndex'> & {
    asChild?: never;
    'aria-hidden'?: never;
    children?: never;
    contentEditable?: never;
    current: true;
    href?: never;
    onClick?: never;
    onKeyDown?: never;
    role?: never;
    tabIndex?: never;
};

type BreadcrumbNativeLinkItemProps = BreadcrumbItemSharedProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'aria-current' | 'aria-hidden' | 'children' | 'className' | 'contentEditable' | 'dangerouslySetInnerHTML' | 'href'> & {
    'aria-hidden'?: never;
    asChild?: false;
    children?: never;
    contentEditable?: never;
    current?: false;
    href: string;
};

type BreadcrumbAsChildItemProps = BreadcrumbItemSharedProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'aria-current' | 'aria-hidden' | 'children' | 'className' | 'contentEditable' | 'dangerouslySetInnerHTML' | 'href'> & {
    'aria-hidden'?: never;
    asChild: true;
    children: ReactElement;
    contentEditable?: never;
    current?: false;
    href?: never;
};

export type BreadcrumbItemProps = BreadcrumbAsChildItemProps | BreadcrumbCurrentItemProps | BreadcrumbNativeLinkItemProps;

export type BreadcrumbSeparatorProps = DataAttributes & Omit<HTMLAttributes<HTMLSpanElement>, 'aria-hidden' | 'children' | 'contentEditable' | 'dangerouslySetInnerHTML' | ReactEventHandlerProp<HTMLAttributes<HTMLSpanElement>> | 'tabIndex'> & {
    'data-slot'?: never;
};

export declare const BreadcrumbSeparator: import("react").ForwardRefExoticComponent<DataAttributes & Omit<HTMLAttributes<HTMLSpanElement>, "tabIndex" | "contentEditable" | "aria-hidden" | "children" | "dangerouslySetInnerHTML" | ReactEventHandlerProp<HTMLAttributes<HTMLSpanElement>>> & {
    'data-slot'?: never;
} & import("react").RefAttributes<HTMLSpanElement>>;

export declare const BreadcrumbItem: import("react").ForwardRefExoticComponent<BreadcrumbItemProps & import("react").RefAttributes<HTMLElement>>;

export declare const Breadcrumb: import("react").ForwardRefExoticComponent<BreadcrumbProps & import("react").RefAttributes<HTMLElement>>;