Skip to content
CtrlK

ArdoActiveLink

On this page

Link that knows whether it points at the current page. It sets aria-current="page" and, for a string class name, adds active.

import { ArdoActiveLink } from "ardo/ui"

<ArdoActiveLink to={…}>{children}</ArdoActiveLink>

Props

NameTypeRequiredDescription
aria-activedescendantstring | undefinedNoIdentifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
aria-atomicBooleanish | undefinedNoIndicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
aria-autocomplete"none" | "inline" | "list" | "both" | undefinedNoIndicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be
presented if they are made.
aria-braillelabelstring | undefinedNoDefines a string value that labels the current element, which is intended to be converted into Braille.
aria-brailleroledescriptionstring | undefinedNoDefines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.
aria-busyBooleanish | undefinedNo
aria-checkedboolean | "false" | "mixed" | "true" | undefinedNoIndicates the current "checked" state of checkboxes, radio buttons, and other widgets.
aria-colcountnumber | undefinedNoDefines the total number of columns in a table, grid, or treegrid.
aria-colindexnumber | undefinedNoDefines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
aria-colindextextstring | undefinedNoDefines a human readable text alternative of aria-colindex.
aria-colspannumber | undefinedNoDefines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
aria-controlsstring | undefinedNoIdentifies the element (or elements) whose contents or presence are controlled by the current element.
aria-currentboolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefinedNoIndicates the element that represents the current item within a container or set of related elements.
aria-describedbystring | undefinedNoIdentifies the element (or elements) that describes the object.
aria-descriptionstring | undefinedNoDefines a string value that describes or annotates the current element.
aria-detailsstring | undefinedNoIdentifies the element that provides a detailed, extended description for the object.
aria-disabledBooleanish | undefinedNoIndicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
aria-dropeffect"none" | "copy" | "execute" | "link" | "move" | "popup" | undefinedNoIndicates what functions can be performed when a dragged object is released on the drop target. Deprecated: in ARIA 1.1.
aria-errormessagestring | undefinedNoIdentifies the element that provides an error message for the object.
aria-expandedBooleanish | undefinedNoIndicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
aria-flowtostring | undefinedNoIdentifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
allows assistive technology to override the general default of reading in document source order.
aria-grabbedBooleanish | undefinedNoIndicates an element's "grabbed" state in a drag-and-drop operation. Deprecated: in ARIA 1.1.
aria-haspopupboolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefinedNoIndicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
aria-hiddenBooleanish | undefinedNoIndicates whether the element is exposed to an accessibility API.
aria-invalidboolean | "false" | "true" | "grammar" | "spelling" | undefinedNoIndicates the entered value does not conform to the format expected by the application.
aria-keyshortcutsstring | undefinedNoIndicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
aria-labelstring | undefinedNoDefines a string value that labels the current element.
aria-labelledbystring | undefinedNoIdentifies the element (or elements) that labels the current element.
aria-levelnumber | undefinedNoDefines the hierarchical level of an element within a structure.
aria-live"off" | "assertive" | "polite" | undefinedNoIndicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
aria-modalBooleanish | undefinedNoIndicates whether an element is modal when displayed.
aria-multilineBooleanish | undefinedNoIndicates whether a text box accepts multiple lines of input or only a single line.
aria-multiselectableBooleanish | undefinedNoIndicates that the user may select more than one item from the current selectable descendants.
aria-orientation"horizontal" | "vertical" | undefinedNoIndicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
aria-ownsstring | undefinedNoIdentifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
aria-placeholderstring | undefinedNoDefines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
A hint could be a sample value or a brief description of the expected format.
aria-posinsetnumber | undefinedNoDefines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
aria-pressedboolean | "false" | "mixed" | "true" | undefinedNoIndicates the current "pressed" state of toggle buttons.
aria-readonlyBooleanish | undefinedNoIndicates that the element is not editable, but is otherwise operable.
aria-relevant| "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefinedNoIndicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
aria-requiredBooleanish | undefinedNoIndicates that user input is required on the element before a form may be submitted.
aria-roledescriptionstring | undefinedNoDefines a human-readable, author-localized description for the role of an element.
aria-rowcountnumber | undefinedNoDefines the total number of rows in a table, grid, or treegrid.
aria-rowindexnumber | undefinedNoDefines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
aria-rowindextextstring | undefinedNoDefines a human readable text alternative of aria-rowindex.
aria-rowspannumber | undefinedNoDefines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
aria-selectedBooleanish | undefinedNoIndicates the current "selected" state of various widgets.
aria-setsizenumber | undefinedNoDefines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
aria-sort"none" | "ascending" | "descending" | "other" | undefinedNoIndicates if items in a table or grid are sorted in ascending or descending order.
aria-valuemaxnumber | undefinedNoDefines the maximum allowed value for a range widget.
aria-valueminnumber | undefinedNoDefines the minimum allowed value for a range widget.
aria-valuenownumber | undefinedNoDefines the current value for a range widget.
aria-valuetextstring | undefinedNoDefines the human readable text alternative of aria-valuenow for a range widget.
children(ReactNode | undefined) & (ReactNode)No
dangerouslySetInnerHTML{ // Should be InnerHTML['innerHTML']. // But unfortunately we're mixing renderer-specific type declarations. __html: string | TrustedHTML } | undefinedNo
onCopyClipboardEventHandler<HTMLAnchorElement> | undefinedNo
onCopyCaptureClipboardEventHandler<HTMLAnchorElement> | undefinedNo
onCutClipboardEventHandler<HTMLAnchorElement> | undefinedNo
onCutCaptureClipboardEventHandler<HTMLAnchorElement> | undefinedNo
onPasteClipboardEventHandler<HTMLAnchorElement> | undefinedNo
onPasteCaptureClipboardEventHandler<HTMLAnchorElement> | undefinedNo
onCompositionEndCompositionEventHandler<HTMLAnchorElement> | undefinedNo
onCompositionEndCaptureCompositionEventHandler<HTMLAnchorElement> | undefinedNo
onCompositionStartCompositionEventHandler<HTMLAnchorElement> | undefinedNo
onCompositionStartCaptureCompositionEventHandler<HTMLAnchorElement> | undefinedNo
onCompositionUpdateCompositionEventHandler<HTMLAnchorElement> | undefinedNo
onCompositionUpdateCaptureCompositionEventHandler<HTMLAnchorElement> | undefinedNo
onFocusFocusEventHandler<HTMLAnchorElement> | undefinedNo
onFocusCaptureFocusEventHandler<HTMLAnchorElement> | undefinedNo
onBlurFocusEventHandler<HTMLAnchorElement> | undefinedNo
onBlurCaptureFocusEventHandler<HTMLAnchorElement> | undefinedNo
onChangeChangeEventHandler<HTMLAnchorElement> | undefinedNo
onChangeCaptureChangeEventHandler<HTMLAnchorElement> | undefinedNo
onBeforeInputInputEventHandler<HTMLAnchorElement> | undefinedNo
onBeforeInputCaptureInputEventHandler<HTMLAnchorElement> | undefinedNo
onInputInputEventHandler<HTMLAnchorElement> | undefinedNo
onInputCaptureInputEventHandler<HTMLAnchorElement> | undefinedNo
onResetReactEventHandler<HTMLAnchorElement> | undefinedNo
onResetCaptureReactEventHandler<HTMLAnchorElement> | undefinedNo
onSubmitSubmitEventHandler<HTMLAnchorElement> | undefinedNo
onSubmitCaptureSubmitEventHandler<HTMLAnchorElement> | undefinedNo
onInvalidReactEventHandler<HTMLAnchorElement> | undefinedNo
onInvalidCaptureReactEventHandler<HTMLAnchorElement> | undefinedNo
onLoadReactEventHandler<HTMLAnchorElement> | undefinedNo
onLoadCaptureReactEventHandler<HTMLAnchorElement> | undefinedNo
onErrorReactEventHandler<HTMLAnchorElement> | undefinedNo
onErrorCaptureReactEventHandler<HTMLAnchorElement> | undefinedNo
onKeyDownKeyboardEventHandler<HTMLAnchorElement> | undefinedNo
onKeyDownCaptureKeyboardEventHandler<HTMLAnchorElement> | undefinedNo
onKeyPressKeyboardEventHandler<HTMLAnchorElement> | undefinedNoDeprecated: Use onKeyUp or onKeyDown instead.
onKeyPressCaptureKeyboardEventHandler<HTMLAnchorElement> | undefinedNoDeprecated: Use onKeyUpCapture or onKeyDownCapture instead.
onKeyUpKeyboardEventHandler<HTMLAnchorElement> | undefinedNo
onKeyUpCaptureKeyboardEventHandler<HTMLAnchorElement> | undefinedNo
onAbortReactEventHandler<HTMLAnchorElement> | undefinedNo
onAbortCaptureReactEventHandler<HTMLAnchorElement> | undefinedNo
onCanPlayReactEventHandler<HTMLAnchorElement> | undefinedNo
onCanPlayCaptureReactEventHandler<HTMLAnchorElement> | undefinedNo
onCanPlayThroughReactEventHandler<HTMLAnchorElement> | undefinedNo
onCanPlayThroughCaptureReactEventHandler<HTMLAnchorElement> | undefinedNo
onDurationChangeReactEventHandler<HTMLAnchorElement> | undefinedNo
onDurationChangeCaptureReactEventHandler<HTMLAnchorElement> | undefinedNo
onEmptiedReactEventHandler<HTMLAnchorElement> | undefinedNo
onEmptiedCaptureReactEventHandler<HTMLAnchorElement> | undefinedNo
onEncryptedReactEventHandler<HTMLAnchorElement> | undefinedNo
onEncryptedCaptureReactEventHandler<HTMLAnchorElement> | undefinedNo
onEndedReactEventHandler<HTMLAnchorElement> | undefinedNo
onEndedCaptureReactEventHandler<HTMLAnchorElement> | undefinedNo
onLoadedDataReactEventHandler<HTMLAnchorElement> | undefinedNo
onLoadedDataCaptureReactEventHandler<HTMLAnchorElement> | undefinedNo
onLoadedMetadataReactEventHandler<HTMLAnchorElement> | undefinedNo
onLoadedMetadataCaptureReactEventHandler<HTMLAnchorElement> | undefinedNo
onLoadStartReactEventHandler<HTMLAnchorElement> | undefinedNo
onLoadStartCaptureReactEventHandler<HTMLAnchorElement> | undefinedNo
onPauseReactEventHandler<HTMLAnchorElement> | undefinedNo
onPauseCaptureReactEventHandler<HTMLAnchorElement> | undefinedNo
onPlayReactEventHandler<HTMLAnchorElement> | undefinedNo
onPlayCaptureReactEventHandler<HTMLAnchorElement> | undefinedNo
onPlayingReactEventHandler<HTMLAnchorElement> | undefinedNo
onPlayingCaptureReactEventHandler<HTMLAnchorElement> | undefinedNo
onProgressReactEventHandler<HTMLAnchorElement> | undefinedNo
onProgressCaptureReactEventHandler<HTMLAnchorElement> | undefinedNo
onRateChangeReactEventHandler<HTMLAnchorElement> | undefinedNo
onRateChangeCaptureReactEventHandler<HTMLAnchorElement> | undefinedNo
onSeekedReactEventHandler<HTMLAnchorElement> | undefinedNo
onSeekedCaptureReactEventHandler<HTMLAnchorElement> | undefinedNo
onSeekingReactEventHandler<HTMLAnchorElement> | undefinedNo
onSeekingCaptureReactEventHandler<HTMLAnchorElement> | undefinedNo
onStalledReactEventHandler<HTMLAnchorElement> | undefinedNo
onStalledCaptureReactEventHandler<HTMLAnchorElement> | undefinedNo
onSuspendReactEventHandler<HTMLAnchorElement> | undefinedNo
onSuspendCaptureReactEventHandler<HTMLAnchorElement> | undefinedNo
onTimeUpdateReactEventHandler<HTMLAnchorElement> | undefinedNo
onTimeUpdateCaptureReactEventHandler<HTMLAnchorElement> | undefinedNo
onVolumeChangeReactEventHandler<HTMLAnchorElement> | undefinedNo
onVolumeChangeCaptureReactEventHandler<HTMLAnchorElement> | undefinedNo
onWaitingReactEventHandler<HTMLAnchorElement> | undefinedNo
onWaitingCaptureReactEventHandler<HTMLAnchorElement> | undefinedNo
onAuxClickMouseEventHandler<HTMLAnchorElement> | undefinedNo
onAuxClickCaptureMouseEventHandler<HTMLAnchorElement> | undefinedNo
onClickMouseEventHandler<HTMLAnchorElement> | undefinedNo
onClickCaptureMouseEventHandler<HTMLAnchorElement> | undefinedNo
onContextMenuMouseEventHandler<HTMLAnchorElement> | undefinedNo
onContextMenuCaptureMouseEventHandler<HTMLAnchorElement> | undefinedNo
onDoubleClickMouseEventHandler<HTMLAnchorElement> | undefinedNo
onDoubleClickCaptureMouseEventHandler<HTMLAnchorElement> | undefinedNo
onDragDragEventHandler<HTMLAnchorElement> | undefinedNo
onDragCaptureDragEventHandler<HTMLAnchorElement> | undefinedNo
onDragEndDragEventHandler<HTMLAnchorElement> | undefinedNo
onDragEndCaptureDragEventHandler<HTMLAnchorElement> | undefinedNo
onDragEnterDragEventHandler<HTMLAnchorElement> | undefinedNo
onDragEnterCaptureDragEventHandler<HTMLAnchorElement> | undefinedNo
onDragExitDragEventHandler<HTMLAnchorElement> | undefinedNo
onDragExitCaptureDragEventHandler<HTMLAnchorElement> | undefinedNo
onDragLeaveDragEventHandler<HTMLAnchorElement> | undefinedNo
onDragLeaveCaptureDragEventHandler<HTMLAnchorElement> | undefinedNo
onDragOverDragEventHandler<HTMLAnchorElement> | undefinedNo
onDragOverCaptureDragEventHandler<HTMLAnchorElement> | undefinedNo
onDragStartDragEventHandler<HTMLAnchorElement> | undefinedNo
onDragStartCaptureDragEventHandler<HTMLAnchorElement> | undefinedNo
onDropDragEventHandler<HTMLAnchorElement> | undefinedNo
onDropCaptureDragEventHandler<HTMLAnchorElement> | undefinedNo
onMouseDownMouseEventHandler<HTMLAnchorElement> | undefinedNo
onMouseDownCaptureMouseEventHandler<HTMLAnchorElement> | undefinedNo
onMouseEnterMouseEventHandler<HTMLAnchorElement> | undefinedNo
onMouseLeaveMouseEventHandler<HTMLAnchorElement> | undefinedNo
onMouseMoveMouseEventHandler<HTMLAnchorElement> | undefinedNo
onMouseMoveCaptureMouseEventHandler<HTMLAnchorElement> | undefinedNo
onMouseOutMouseEventHandler<HTMLAnchorElement> | undefinedNo
onMouseOutCaptureMouseEventHandler<HTMLAnchorElement> | undefinedNo
onMouseOverMouseEventHandler<HTMLAnchorElement> | undefinedNo
onMouseOverCaptureMouseEventHandler<HTMLAnchorElement> | undefinedNo
onMouseUpMouseEventHandler<HTMLAnchorElement> | undefinedNo
onMouseUpCaptureMouseEventHandler<HTMLAnchorElement> | undefinedNo
onSelectReactEventHandler<HTMLAnchorElement> | undefinedNo
onSelectCaptureReactEventHandler<HTMLAnchorElement> | undefinedNo
onTouchCancelTouchEventHandler<HTMLAnchorElement> | undefinedNo
onTouchCancelCaptureTouchEventHandler<HTMLAnchorElement> | undefinedNo
onTouchEndTouchEventHandler<HTMLAnchorElement> | undefinedNo
onTouchEndCaptureTouchEventHandler<HTMLAnchorElement> | undefinedNo
onTouchMoveTouchEventHandler<HTMLAnchorElement> | undefinedNo
onTouchMoveCaptureTouchEventHandler<HTMLAnchorElement> | undefinedNo
onTouchStartTouchEventHandler<HTMLAnchorElement> | undefinedNo
onTouchStartCaptureTouchEventHandler<HTMLAnchorElement> | undefinedNo
onPointerDownPointerEventHandler<HTMLAnchorElement> | undefinedNo
onPointerDownCapturePointerEventHandler<HTMLAnchorElement> | undefinedNo
onPointerMovePointerEventHandler<HTMLAnchorElement> | undefinedNo
onPointerMoveCapturePointerEventHandler<HTMLAnchorElement> | undefinedNo
onPointerUpPointerEventHandler<HTMLAnchorElement> | undefinedNo
onPointerUpCapturePointerEventHandler<HTMLAnchorElement> | undefinedNo
onPointerCancelPointerEventHandler<HTMLAnchorElement> | undefinedNo
onPointerCancelCapturePointerEventHandler<HTMLAnchorElement> | undefinedNo
onPointerEnterPointerEventHandler<HTMLAnchorElement> | undefinedNo
onPointerLeavePointerEventHandler<HTMLAnchorElement> | undefinedNo
onPointerOverPointerEventHandler<HTMLAnchorElement> | undefinedNo
onPointerOverCapturePointerEventHandler<HTMLAnchorElement> | undefinedNo
onPointerOutPointerEventHandler<HTMLAnchorElement> | undefinedNo
onPointerOutCapturePointerEventHandler<HTMLAnchorElement> | undefinedNo
onGotPointerCapturePointerEventHandler<HTMLAnchorElement> | undefinedNo
onGotPointerCaptureCapturePointerEventHandler<HTMLAnchorElement> | undefinedNo
onLostPointerCapturePointerEventHandler<HTMLAnchorElement> | undefinedNo
onLostPointerCaptureCapturePointerEventHandler<HTMLAnchorElement> | undefinedNo
onScrollUIEventHandler<HTMLAnchorElement> | undefinedNo
onScrollCaptureUIEventHandler<HTMLAnchorElement> | undefinedNo
onScrollEndUIEventHandler<HTMLAnchorElement> | undefinedNo
onScrollEndCaptureUIEventHandler<HTMLAnchorElement> | undefinedNo
onWheelWheelEventHandler<HTMLAnchorElement> | undefinedNo
onWheelCaptureWheelEventHandler<HTMLAnchorElement> | undefinedNo
onAnimationStartAnimationEventHandler<HTMLAnchorElement> | undefinedNo
onAnimationStartCaptureAnimationEventHandler<HTMLAnchorElement> | undefinedNo
onAnimationEndAnimationEventHandler<HTMLAnchorElement> | undefinedNo
onAnimationEndCaptureAnimationEventHandler<HTMLAnchorElement> | undefinedNo
onAnimationIterationAnimationEventHandler<HTMLAnchorElement> | undefinedNo
onAnimationIterationCaptureAnimationEventHandler<HTMLAnchorElement> | undefinedNo
onToggleToggleEventHandler<HTMLAnchorElement> | undefinedNo
onBeforeToggleToggleEventHandler<HTMLAnchorElement> | undefinedNo
onTransitionCancelTransitionEventHandler<HTMLAnchorElement> | undefinedNo
onTransitionCancelCaptureTransitionEventHandler<HTMLAnchorElement> | undefinedNo
onTransitionEndTransitionEventHandler<HTMLAnchorElement> | undefinedNo
onTransitionEndCaptureTransitionEventHandler<HTMLAnchorElement> | undefinedNo
onTransitionRunTransitionEventHandler<HTMLAnchorElement> | undefinedNo
onTransitionRunCaptureTransitionEventHandler<HTMLAnchorElement> | undefinedNo
onTransitionStartTransitionEventHandler<HTMLAnchorElement> | undefinedNo
onTransitionStartCaptureTransitionEventHandler<HTMLAnchorElement> | undefinedNo
defaultCheckedboolean | undefinedNo
defaultValuestring | number | readonly string[] | undefinedNo
suppressContentEditableWarningboolean | undefinedNo
suppressHydrationWarningboolean | undefinedNo
accessKeystring | undefinedNo
autoCapitalize"off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {})No
autoFocusboolean | undefinedNo
contentEditableBooleanish | "inherit" | "plaintext-only" | undefinedNo
contextMenustring | undefinedNo
dirstring | undefinedNo
draggableBooleanish | undefinedNo
enterKeyHint"enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefinedNo
hiddenboolean | undefinedNo
idstring | undefinedNo
langstring | undefinedNo
noncestring | undefinedNo
slotstring | undefinedNo
spellCheckBooleanish | undefinedNo
styleCSSProperties | undefinedNo
tabIndexnumber | undefinedNo
titlestring | undefinedNo
translate"yes" | "no" | undefinedNo
radioGroupstring | undefinedNo
roleAriaRole | undefinedNo
aboutstring | undefinedNo
contentstring | undefinedNo
datatypestring | undefinedNo
inlistanyNo
prefixstring | undefinedNo
propertystring | undefinedNo
relstring | undefinedNo
resourcestring | undefinedNo
revstring | undefinedNo
typeofstring | undefinedNo
vocabstring | undefinedNo
autoCorrectstring | undefinedNo
autoSavestring | undefinedNo
colorstring | undefinedNo
itemPropstring | undefinedNo
itemScopeboolean | undefinedNo
itemTypestring | undefinedNo
itemIDstring | undefinedNo
itemRefstring | undefinedNo
resultsnumber | undefinedNo
securitystring | undefinedNo
unselectable"on" | "off" | undefinedNo
popover"" | "auto" | "manual" | "hint" | undefinedNo
popoverTargetAction"toggle" | "show" | "hide" | undefinedNo
popoverTargetstring | undefinedNo
inertboolean | undefinedNo
inputMode"none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefinedNoHints at the type of data that might be entered by the user while editing the element or its contents
isstring | undefinedNoSpecify that a standard HTML element should behave like a defined custom built-in element
exportpartsstring | undefinedNo
partstring | undefinedNo
downloadanyNo
hrefLangstring | undefinedNo
mediastring | undefinedNo
pingstring | undefinedNo
targetHTMLAttributeAnchorTarget | undefinedNo
typestring | undefinedNo
referrerPolicyHTMLAttributeReferrerPolicy | undefinedNo
tostringYesInternal path such as /guide/intro, a relative path, an anchor, or an external URL.
endbooleanNoOnly match the exact path, not its descendants.
className((state: { isActive: boolean }) => string | undefined) | stringNoA string gets active appended when the link matches the current page.

Props type: ArdoActiveLinkProps