Breadcrumbs

Copy for LLM

Breadcrumbs display a hierarchy of links to the current page or resource in an application.

Import

import { Breadcrumbs } from "@cfa/react-core";

Live Editor

Examples

Default

A simple breadcrumb navigation with three pages.

Disabled Link

You can disable a link by setting the isDisabled prop. This is useful for indicating the current page.

Dynamic - Render Function

Out of the box, you can use the items prop and pass in an Iterable. This should include an id property in the object.

This allows you to use a render function to render the items. This handles some things behind the scenes like setting a key.

Dynamic - Array Map

You can also use the standard .map() option, but keep in mind that you will have to manually add the key to the Breadcrumb.Item

You can also choose not to use the href props and utilize the onAction prop perform a custom action when an item is clicked.

The value that is passed into this function is a Key and will be the id of the item.

Props

Visit the Documentation Site for the full list of props.

Breadcrumbs.Root

Name	Type	Default	Description
aria-describedby	`string`	-	Identifies the element (or elements) that describes the object.
aria-details	`string`	-	Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-label	`string`	-	Defines a string value that labels the current element.
aria-labelledby	`string`	-	Identifies the element (or elements) that labels the current element.
children	`ReactNode \| ((item: T) => ReactNode)`	-	The contents of the collection.
className	`string`	`'react-aria-Breadcrumbs'`	The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
dependencies	`readonly any[]`	-	Values that should invalidate the item cache when using dynamic collections.
dir	`string`	-	-
hidden	`boolean`	-	-
id	`string`	-	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
inert	`boolean`	-	-
items	`Iterable<T>`	-	Item objects in the collection.
lang	`string`	-	-
onAction	`(key: Key) => void`	-	Handler that is called when a breadcrumb is clicked.
onAnimationEnd	`AnimationEventHandler<HTMLOListElement>`	-	-
onAnimationEndCapture	`AnimationEventHandler<HTMLOListElement>`	-	-
onAnimationIteration	`AnimationEventHandler<HTMLOListElement>`	-	-
onAnimationIterationCapture	`AnimationEventHandler<HTMLOListElement>`	-	-
onAnimationStart	`AnimationEventHandler<HTMLOListElement>`	-	-
onAnimationStartCapture	`AnimationEventHandler<HTMLOListElement>`	-	-
onAuxClick	`MouseEventHandler<HTMLOListElement>`	-	-
onAuxClickCapture	`MouseEventHandler<HTMLOListElement>`	-	-
onClick	`MouseEventHandler<HTMLOListElement>`	-	-
onClickCapture	`MouseEventHandler<HTMLOListElement>`	-	-
onContextMenu	`MouseEventHandler<HTMLOListElement>`	-	-
onContextMenuCapture	`MouseEventHandler<HTMLOListElement>`	-	-
onDoubleClick	`MouseEventHandler<HTMLOListElement>`	-	-
onDoubleClickCapture	`MouseEventHandler<HTMLOListElement>`	-	-
onGotPointerCapture	`PointerEventHandler<HTMLOListElement>`	-	-
onGotPointerCaptureCapture	`PointerEventHandler<HTMLOListElement>`	-	-
onLostPointerCapture	`PointerEventHandler<HTMLOListElement>`	-	-
onLostPointerCaptureCapture	`PointerEventHandler<HTMLOListElement>`	-	-
onMouseDown	`MouseEventHandler<HTMLOListElement>`	-	-
onMouseDownCapture	`MouseEventHandler<HTMLOListElement>`	-	-
onMouseEnter	`MouseEventHandler<HTMLOListElement>`	-	-
onMouseLeave	`MouseEventHandler<HTMLOListElement>`	-	-
onMouseMove	`MouseEventHandler<HTMLOListElement>`	-	-
onMouseMoveCapture	`MouseEventHandler<HTMLOListElement>`	-	-
onMouseOut	`MouseEventHandler<HTMLOListElement>`	-	-
onMouseOutCapture	`MouseEventHandler<HTMLOListElement>`	-	-
onMouseOver	`MouseEventHandler<HTMLOListElement>`	-	-
onMouseOverCapture	`MouseEventHandler<HTMLOListElement>`	-	-
onMouseUp	`MouseEventHandler<HTMLOListElement>`	-	-
onMouseUpCapture	`MouseEventHandler<HTMLOListElement>`	-	-
onPointerCancel	`PointerEventHandler<HTMLOListElement>`	-	-
onPointerCancelCapture	`PointerEventHandler<HTMLOListElement>`	-	-
onPointerDown	`PointerEventHandler<HTMLOListElement>`	-	-
onPointerDownCapture	`PointerEventHandler<HTMLOListElement>`	-	-
onPointerEnter	`PointerEventHandler<HTMLOListElement>`	-	-
onPointerLeave	`PointerEventHandler<HTMLOListElement>`	-	-
onPointerMove	`PointerEventHandler<HTMLOListElement>`	-	-
onPointerMoveCapture	`PointerEventHandler<HTMLOListElement>`	-	-
onPointerOut	`PointerEventHandler<HTMLOListElement>`	-	-
onPointerOutCapture	`PointerEventHandler<HTMLOListElement>`	-	-
onPointerOver	`PointerEventHandler<HTMLOListElement>`	-	-
onPointerOverCapture	`PointerEventHandler<HTMLOListElement>`	-	-
onPointerUp	`PointerEventHandler<HTMLOListElement>`	-	-
onPointerUpCapture	`PointerEventHandler<HTMLOListElement>`	-	-
onScroll	`UIEventHandler<HTMLOListElement>`	-	-
onScrollCapture	`UIEventHandler<HTMLOListElement>`	-	-
onTouchCancel	`TouchEventHandler<HTMLOListElement>`	-	-
onTouchCancelCapture	`TouchEventHandler<HTMLOListElement>`	-	-
onTouchEnd	`TouchEventHandler<HTMLOListElement>`	-	-
onTouchEndCapture	`TouchEventHandler<HTMLOListElement>`	-	-
onTouchMove	`TouchEventHandler<HTMLOListElement>`	-	-
onTouchMoveCapture	`TouchEventHandler<HTMLOListElement>`	-	-
onTouchStart	`TouchEventHandler<HTMLOListElement>`	-	-
onTouchStartCapture	`TouchEventHandler<HTMLOListElement>`	-	-
onTransitionCancel	`TransitionEventHandler<HTMLOListElement>`	-	-
onTransitionCancelCapture	`TransitionEventHandler<HTMLOListElement>`	-	-
onTransitionEnd	`TransitionEventHandler<HTMLOListElement>`	-	-
onTransitionEndCapture	`TransitionEventHandler<HTMLOListElement>`	-	-
onTransitionRun	`TransitionEventHandler<HTMLOListElement>`	-	-
onTransitionRunCapture	`TransitionEventHandler<HTMLOListElement>`	-	-
onTransitionStart	`TransitionEventHandler<HTMLOListElement>`	-	-
onTransitionStartCapture	`TransitionEventHandler<HTMLOListElement>`	-	-
onWheel	`WheelEventHandler<HTMLOListElement>`	-	-
onWheelCapture	`WheelEventHandler<HTMLOListElement>`	-	-
render	`DOMRenderFunction<"ol", undefined>`	-	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: * You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). * Only a single root DOM element can be rendered (no fragments). * You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
slot	`string`	-	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.
style	`CSSProperties`	-	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.
translate	`"yes" \| "no"`	-	-

Breadcrumbs.Item

Name	Type	Default	Description
aria-describedby	`string`	-	Identifies the element (or elements) that describes the object.
aria-details	`string`	-	Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-label	`string`	-	Defines a string value that labels the current element.
aria-labelledby	`string`	-	Identifies the element (or elements) that labels the current element.
children	`ChildrenOrFunction<BreadcrumbRenderProps>`	-	The children of the component. A function may be provided to alter the children based on component state.
className	`ClassNameOrFunction<BreadcrumbRenderProps>`	`'react-aria-Breadcrumb'`	The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
dir	`string`	-	-
hidden	`boolean`	-	-
id	`Key`	-	A unique id for the breadcrumb, which will be passed to `onAction` when the breadcrumb is pressed.
inert	`boolean`	-	-
lang	`string`	-	-
onAnimationEnd	`AnimationEventHandler<HTMLLIElement>`	-	-
onAnimationEndCapture	`AnimationEventHandler<HTMLLIElement>`	-	-
onAnimationIteration	`AnimationEventHandler<HTMLLIElement>`	-	-
onAnimationIterationCapture	`AnimationEventHandler<HTMLLIElement>`	-	-
onAnimationStart	`AnimationEventHandler<HTMLLIElement>`	-	-
onAnimationStartCapture	`AnimationEventHandler<HTMLLIElement>`	-	-
onAuxClick	`MouseEventHandler<HTMLLIElement>`	-	-
onAuxClickCapture	`MouseEventHandler<HTMLLIElement>`	-	-
onClick	`MouseEventHandler<HTMLLIElement>`	-	-
onClickCapture	`MouseEventHandler<HTMLLIElement>`	-	-
onContextMenu	`MouseEventHandler<HTMLLIElement>`	-	-
onContextMenuCapture	`MouseEventHandler<HTMLLIElement>`	-	-
onDoubleClick	`MouseEventHandler<HTMLLIElement>`	-	-
onDoubleClickCapture	`MouseEventHandler<HTMLLIElement>`	-	-
onGotPointerCapture	`PointerEventHandler<HTMLLIElement>`	-	-
onGotPointerCaptureCapture	`PointerEventHandler<HTMLLIElement>`	-	-
onLostPointerCapture	`PointerEventHandler<HTMLLIElement>`	-	-
onLostPointerCaptureCapture	`PointerEventHandler<HTMLLIElement>`	-	-
onMouseDown	`MouseEventHandler<HTMLLIElement>`	-	-
onMouseDownCapture	`MouseEventHandler<HTMLLIElement>`	-	-
onMouseEnter	`MouseEventHandler<HTMLLIElement>`	-	-
onMouseLeave	`MouseEventHandler<HTMLLIElement>`	-	-
onMouseMove	`MouseEventHandler<HTMLLIElement>`	-	-
onMouseMoveCapture	`MouseEventHandler<HTMLLIElement>`	-	-
onMouseOut	`MouseEventHandler<HTMLLIElement>`	-	-
onMouseOutCapture	`MouseEventHandler<HTMLLIElement>`	-	-
onMouseOver	`MouseEventHandler<HTMLLIElement>`	-	-
onMouseOverCapture	`MouseEventHandler<HTMLLIElement>`	-	-
onMouseUp	`MouseEventHandler<HTMLLIElement>`	-	-
onMouseUpCapture	`MouseEventHandler<HTMLLIElement>`	-	-
onPointerCancel	`PointerEventHandler<HTMLLIElement>`	-	-
onPointerCancelCapture	`PointerEventHandler<HTMLLIElement>`	-	-
onPointerDown	`PointerEventHandler<HTMLLIElement>`	-	-
onPointerDownCapture	`PointerEventHandler<HTMLLIElement>`	-	-
onPointerEnter	`PointerEventHandler<HTMLLIElement>`	-	-
onPointerLeave	`PointerEventHandler<HTMLLIElement>`	-	-
onPointerMove	`PointerEventHandler<HTMLLIElement>`	-	-
onPointerMoveCapture	`PointerEventHandler<HTMLLIElement>`	-	-
onPointerOut	`PointerEventHandler<HTMLLIElement>`	-	-
onPointerOutCapture	`PointerEventHandler<HTMLLIElement>`	-	-
onPointerOver	`PointerEventHandler<HTMLLIElement>`	-	-
onPointerOverCapture	`PointerEventHandler<HTMLLIElement>`	-	-
onPointerUp	`PointerEventHandler<HTMLLIElement>`	-	-
onPointerUpCapture	`PointerEventHandler<HTMLLIElement>`	-	-
onScroll	`UIEventHandler<HTMLLIElement>`	-	-
onScrollCapture	`UIEventHandler<HTMLLIElement>`	-	-
onTouchCancel	`TouchEventHandler<HTMLLIElement>`	-	-
onTouchCancelCapture	`TouchEventHandler<HTMLLIElement>`	-	-
onTouchEnd	`TouchEventHandler<HTMLLIElement>`	-	-
onTouchEndCapture	`TouchEventHandler<HTMLLIElement>`	-	-
onTouchMove	`TouchEventHandler<HTMLLIElement>`	-	-
onTouchMoveCapture	`TouchEventHandler<HTMLLIElement>`	-	-
onTouchStart	`TouchEventHandler<HTMLLIElement>`	-	-
onTouchStartCapture	`TouchEventHandler<HTMLLIElement>`	-	-
onTransitionCancel	`TransitionEventHandler<HTMLLIElement>`	-	-
onTransitionCancelCapture	`TransitionEventHandler<HTMLLIElement>`	-	-
onTransitionEnd	`TransitionEventHandler<HTMLLIElement>`	-	-
onTransitionEndCapture	`TransitionEventHandler<HTMLLIElement>`	-	-
onTransitionRun	`TransitionEventHandler<HTMLLIElement>`	-	-
onTransitionRunCapture	`TransitionEventHandler<HTMLLIElement>`	-	-
onTransitionStart	`TransitionEventHandler<HTMLLIElement>`	-	-
onTransitionStartCapture	`TransitionEventHandler<HTMLLIElement>`	-	-
onWheel	`WheelEventHandler<HTMLLIElement>`	-	-
onWheelCapture	`WheelEventHandler<HTMLLIElement>`	-	-
render	`DOMRenderFunction<"li", BreadcrumbRenderProps>`	-	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: * You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). * Only a single root DOM element can be rendered (no fragments). * You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
style	`StyleOrFunction<BreadcrumbRenderProps>`	-	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
translate	`"yes" \| "no"`	-	-

Breadcrumbs.Link

Name	Type	Default	Description
aria-describedby	`string`	-	Identifies the element (or elements) that describes the object.
aria-details	`string`	-	Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-label	`string`	-	Defines a string value that labels the current element.
aria-labelledby	`string`	-	Identifies the element (or elements) that labels the current element.
autoFocus	`boolean`	-	Whether the element should receive focus on render.
children	`ChildrenOrFunction<LinkRenderProps>`	-	The children of the component. A function may be provided to alter the children based on component state.
className	`ClassNameOrFunction<LinkRenderProps>`	`'react-aria-Link'`	The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
dir	`string`	-	-
download	`string \| boolean`	-	Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).
hidden	`boolean`	-	-
href	`string`	-	A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).
hrefLang	`string`	-	Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).
id	`string`	-	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
inert	`boolean`	-	-
isDisabled	`boolean`	-	Whether the link is disabled.
lang	`string`	-	-
onAnimationEnd	`AnimationEventHandler<HTMLAnchorElement>`	-	-
onAnimationEndCapture	`AnimationEventHandler<HTMLAnchorElement>`	-	-
onAnimationIteration	`AnimationEventHandler<HTMLAnchorElement>`	-	-
onAnimationIterationCapture	`AnimationEventHandler<HTMLAnchorElement>`	-	-
onAnimationStart	`AnimationEventHandler<HTMLAnchorElement>`	-	-
onAnimationStartCapture	`AnimationEventHandler<HTMLAnchorElement>`	-	-
onAuxClick	`MouseEventHandler<HTMLAnchorElement>`	-	-
onAuxClickCapture	`MouseEventHandler<HTMLAnchorElement>`	-	-
onBlur	`(e: FocusEvent<Element, Element>) => void`	-	Handler that is called when the element loses focus.
onClickCapture	`MouseEventHandler<HTMLAnchorElement>`	-	-
onContextMenu	`MouseEventHandler<HTMLAnchorElement>`	-	-
onContextMenuCapture	`MouseEventHandler<HTMLAnchorElement>`	-	-
onDoubleClick	`MouseEventHandler<HTMLAnchorElement>`	-	-
onDoubleClickCapture	`MouseEventHandler<HTMLAnchorElement>`	-	-
onFocus	`(e: FocusEvent<Element, Element>) => void`	-	Handler that is called when the element receives focus.
onFocusChange	`(isFocused: boolean) => void`	-	Handler that is called when the element's focus status changes.
onGotPointerCapture	`PointerEventHandler<HTMLAnchorElement>`	-	-
onGotPointerCaptureCapture	`PointerEventHandler<HTMLAnchorElement>`	-	-
onHoverChange	`(isHovering: boolean) => void`	-	Handler that is called when the hover state changes.
onHoverEnd	`(e: HoverEvent) => void`	-	Handler that is called when a hover interaction ends.
onHoverStart	`(e: HoverEvent) => void`	-	Handler that is called when a hover interaction starts.
onKeyDown	`(e: KeyboardEvent) => void`	-	Handler that is called when a key is pressed.
onKeyUp	`(e: KeyboardEvent) => void`	-	Handler that is called when a key is released.
onLostPointerCapture	`PointerEventHandler<HTMLAnchorElement>`	-	-
onLostPointerCaptureCapture	`PointerEventHandler<HTMLAnchorElement>`	-	-
onMouseDown	`MouseEventHandler<HTMLAnchorElement>`	-	-
onMouseDownCapture	`MouseEventHandler<HTMLAnchorElement>`	-	-
onMouseEnter	`MouseEventHandler<HTMLAnchorElement>`	-	-
onMouseLeave	`MouseEventHandler<HTMLAnchorElement>`	-	-
onMouseMove	`MouseEventHandler<HTMLAnchorElement>`	-	-
onMouseMoveCapture	`MouseEventHandler<HTMLAnchorElement>`	-	-
onMouseOut	`MouseEventHandler<HTMLAnchorElement>`	-	-
onMouseOutCapture	`MouseEventHandler<HTMLAnchorElement>`	-	-
onMouseOver	`MouseEventHandler<HTMLAnchorElement>`	-	-
onMouseOverCapture	`MouseEventHandler<HTMLAnchorElement>`	-	-
onMouseUp	`MouseEventHandler<HTMLAnchorElement>`	-	-
onMouseUpCapture	`MouseEventHandler<HTMLAnchorElement>`	-	-
onPointerCancel	`PointerEventHandler<HTMLAnchorElement>`	-	-
onPointerCancelCapture	`PointerEventHandler<HTMLAnchorElement>`	-	-
onPointerDown	`PointerEventHandler<HTMLAnchorElement>`	-	-
onPointerDownCapture	`PointerEventHandler<HTMLAnchorElement>`	-	-
onPointerEnter	`PointerEventHandler<HTMLAnchorElement>`	-	-
onPointerLeave	`PointerEventHandler<HTMLAnchorElement>`	-	-
onPointerMove	`PointerEventHandler<HTMLAnchorElement>`	-	-
onPointerMoveCapture	`PointerEventHandler<HTMLAnchorElement>`	-	-
onPointerOut	`PointerEventHandler<HTMLAnchorElement>`	-	-
onPointerOutCapture	`PointerEventHandler<HTMLAnchorElement>`	-	-
onPointerOver	`PointerEventHandler<HTMLAnchorElement>`	-	-
onPointerOverCapture	`PointerEventHandler<HTMLAnchorElement>`	-	-
onPointerUp	`PointerEventHandler<HTMLAnchorElement>`	-	-
onPointerUpCapture	`PointerEventHandler<HTMLAnchorElement>`	-	-
onPress	`(e: PressEvent) => void`	-	Handler that is called when the press is released over the target.
onPressChange	`(isPressed: boolean) => void`	-	Handler that is called when the press state changes.
onPressEnd	`(e: PressEvent) => void`	-	Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.
onPressStart	`(e: PressEvent) => void`	-	Handler that is called when a press interaction starts.
onPressUp	`(e: PressEvent) => void`	-	Handler that is called when a press is released over the target, regardless of whether it started on the target or not.
onScroll	`UIEventHandler<HTMLAnchorElement>`	-	-
onScrollCapture	`UIEventHandler<HTMLAnchorElement>`	-	-
onTouchCancel	`TouchEventHandler<HTMLAnchorElement>`	-	-
onTouchCancelCapture	`TouchEventHandler<HTMLAnchorElement>`	-	-
onTouchEnd	`TouchEventHandler<HTMLAnchorElement>`	-	-
onTouchEndCapture	`TouchEventHandler<HTMLAnchorElement>`	-	-
onTouchMove	`TouchEventHandler<HTMLAnchorElement>`	-	-
onTouchMoveCapture	`TouchEventHandler<HTMLAnchorElement>`	-	-
onTouchStart	`TouchEventHandler<HTMLAnchorElement>`	-	-
onTouchStartCapture	`TouchEventHandler<HTMLAnchorElement>`	-	-
onTransitionCancel	`TransitionEventHandler<HTMLAnchorElement>`	-	-
onTransitionCancelCapture	`TransitionEventHandler<HTMLAnchorElement>`	-	-
onTransitionEnd	`TransitionEventHandler<HTMLAnchorElement>`	-	-
onTransitionEndCapture	`TransitionEventHandler<HTMLAnchorElement>`	-	-
onTransitionRun	`TransitionEventHandler<HTMLAnchorElement>`	-	-
onTransitionRunCapture	`TransitionEventHandler<HTMLAnchorElement>`	-	-
onTransitionStart	`TransitionEventHandler<HTMLAnchorElement>`	-	-
onTransitionStartCapture	`TransitionEventHandler<HTMLAnchorElement>`	-	-
onWheel	`WheelEventHandler<HTMLAnchorElement>`	-	-
onWheelCapture	`WheelEventHandler<HTMLAnchorElement>`	-	-
ping	`string`	-	A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).
referrerPolicy	`HTMLAttributeReferrerPolicy`	-	How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).
rel	`string`	-	The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
render	`(props: any, renderProps: LinkRenderProps) => ReactElement<unknown, string \| JSXElementConstructor<any>>`	-	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Note: You can check if `'href' in props` in order to tell whether to render an `<a>` element. Requirements: * You must render the expected element type (e.g. if `<a>` is expected, you cannot render a `<button>`). * Only a single root DOM element can be rendered (no fragments). * You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
routerOptions	`never`	-	Options for the configured client side router.
slot	`string`	-	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.
style	`StyleOrFunction<LinkRenderProps>`	-	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
target	`HTMLAttributeAnchorTarget`	-	The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).
translate	`"yes" \| "no"`	-	-