Breadcrumb API

API documentation for Breadcrumb component

BreadcrumbRoot#

Props#

Defines valid properties in Breadcrumb component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: BreadcrumbRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: BreadcrumbRootInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<BreadcrumbRootPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: BreadcrumbRootInstance) => ReactNode)	null	The children to render.
align	"center" \| "top" \| "right" \| "bottom" \| "left"	null	Alignment of the content.
orientation	"horizontal" \| "vertical"	horizontal	Specifies the orientation, valid values are 'horizontal' and 'vertical'.
type	"solid" \| "dashed" \| "dotted"	solid	Border style type.
onAction	(key: string) => void	null	Callback to invoke when an action is performed.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by Breadcrumb component.

name	type	default	description
onAction	(event: MouseEvent, key: string) => void	null	Callback to invoke when an action is performed.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Breadcrumb component.

name	type	default	description
root	BreadcrumbRootPassThroughType<HTMLAttributes<HTMLElement>>	null	Used to pass attributes to the root's DOM element.
list	BreadcrumbRootPassThroughType<HTMLAttributes<HTMLOListElement>>	null	Used to pass attributes to the list's DOM element.
item	BreadcrumbRootPassThroughType<HTMLAttributes<HTMLLIElement>>	null	Used to pass attributes to the item's DOM element.
separator	BreadcrumbRootPassThroughType<HTMLAttributes<HTMLLIElement>>	null	Used to pass attributes to the separator's DOM element.
icon	BreadcrumbRootPassThroughType<HTMLAttributes<SVGElement>>	null	Used to pass attributes to the icon's DOM element.

Types#

Instance

Instance of Breadcrumb component.

values
ComponentInstance<BreadcrumbRootProps, BreadcrumbRootState, BreadcrumbRootExposes>

BreadcrumbList#

Props#

Defines valid properties in BreadcrumbList component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: BreadcrumbListInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: BreadcrumbListInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<BreadcrumbListPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: BreadcrumbListInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by BreadcrumbList component.

name	type	default	description
breadcrumb	BreadcrumbRootInstance	null	Instance of the Breadcrumb component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of BreadcrumbList component.

name	type	default	description
root	BreadcrumbListPassThroughType<HTMLAttributes<HTMLOListElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of BreadcrumbList component.

values
ComponentInstance<BreadcrumbListProps, BreadcrumbListState, BreadcrumbListExposes>

BreadcrumbItem#

Props#

Defines valid properties in BreadcrumbItem component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: BreadcrumbItemInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: BreadcrumbItemInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<BreadcrumbItemPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: BreadcrumbItemInstance) => ReactNode)	null	The children to render.
uKey	PropertyKey	null	Unique key for the option. Used for identification.
disabled	boolean	null	Specifies if the item is disabled.
isCurrent	boolean	null	Specifies if the item is the current one.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by BreadcrumbItem component.

name	type	default	description
breadcrumb	BreadcrumbRootInstance	null	Instance of the Breadcrumb component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of BreadcrumbItem component.

name	type	default	description
root	BreadcrumbItemPassThroughType<HTMLAttributes<HTMLLIElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of BreadcrumbItem component.

values
ComponentInstance<BreadcrumbItemProps, BreadcrumbItemState, BreadcrumbItemExposes>

BreadcrumbSeparator#

Props#

Defines valid properties in BreadcrumbSeparator component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: BreadcrumbSeparatorInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: BreadcrumbSeparatorInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<BreadcrumbSeparatorPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: BreadcrumbSeparatorInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by BreadcrumbSeparator component.

name	type	default	description
breadcrumb	BreadcrumbRootInstance	null	Instance of the Breadcrumb component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of BreadcrumbSeparator component.

name	type	default	description
root	BreadcrumbSeparatorPassThroughType<HTMLAttributes<HTMLLIElement>>	null	Used to pass attributes to the root's DOM element.
icon	BreadcrumbSeparatorPassThroughType<HTMLAttributes<SVGElement>>	null	Used to pass attributes to the icon's DOM element.

Types#

Instance

Instance of BreadcrumbSeparator component.

values
ComponentInstance<BreadcrumbSeparatorProps, BreadcrumbSeparatorState, BreadcrumbSeparatorExposes>

useBreadcrumb#

Props#

Defines valid properties in useBreadcrumb.

name	type	default	description
onAction	(key: string) => void	null	Callback to invoke when an action is performed.

Exposes#

Defines the methods and properties exposed by useBreadcrumb.

name	type	default	description
onAction	(event: MouseEvent, key: string) => void	null	Callback to invoke when an action is performed.

Types#

Instance

Instance of useBreadcrumb headless.

values
HeadlessInstance<useBreadcrumbProps, useBreadcrumbState, useBreadcrumbExposes>