Skip to content

Latest commit

 

History

History
92 lines (73 loc) · 9.62 KB

breadcrumb.md

File metadata and controls

92 lines (73 loc) · 9.62 KB
Raw

Breadcrumb

Breadcrumb component is used for the page navigation and it provides the required aria attributes for it's links and the current link. It follows the WAI-ARIA Breadcrumb Pattern for its accessibility properties.

Table of Contents

Usage

import * as React from "react";

import { BreadcrumbLink, Breadcrumbs } from "@adaptui/react";

export const BreadcrumbsBasic = props => {
  return (
    <Breadcrumbs className="breadcrumb">
      <ol>
        <li>
          <BreadcrumbLink href="https://www.w3.org/WAI/ARIA/apg/">
            ARIA Authoring Practices Guide
          </BreadcrumbLink>
        </li>
        <li>
          <BreadcrumbLink href="https://www.w3.org/WAI/ARIA/apg/patterns/">
            APG Patterns
          </BreadcrumbLink>
        </li>
        <li>
          <BreadcrumbLink
            isCurrentPage
            href="https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/"
          >
            Breadcrumb Pattern
          </BreadcrumbLink>
        </li>
        <li>
          <BreadcrumbLink href="https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/">
            Breadcrumb Example
          </BreadcrumbLink>
        </li>
      </ol>
    </Breadcrumbs>
  );
};

export default BreadcrumbsBasic;

Edit CodeSandbox Edit CodeSandbox

Composition

  • BreadcrumbLink uses useCommand
  • Breadcrumbs uses Role

Props

BreadcrumbLinkOptions

Name Type Description
isCurrentPage boolean | undefined If true, sets aria-current: "page"
CommandOptions props > These props are returned by the other props You can also provide these props.
Name Type Description
disabled boolean | undefined Determines whether the focusable element is disabled. If the focusableelement doesn't support the native disabled attribute, thearia-disabled attribute will be used instead.
autoFocus boolean | undefined Automatically focus the element when it is mounted. It works similarly tothe native autoFocus prop, but solves an issue where the element isgiven focus before React effects can run.
focusable boolean | undefined Whether the element should be focusable.
accessibleWhenDisabled boolean | undefined Determines whether the element should be focusable even when it isdisabled.This is important when discoverability is a concern. For example:> A toolbar in an editor contains a set of special smart paste functionsthat are disabled when the clipboard is empty or when the function is notapplicable to the current content of the clipboard. It could be helpful tokeep the disabled buttons focusable if the ability to discover theirfunctionality is primarily via their presence on the toolbar.Learn more on Focusability of disabledcontrols.
onFocusVisible ((event: SyntheticEvent<Element, Event>) => voi... Custom event handler that is called when the element is focused via thekeyboard or when a key is pressed while the element is focused.
clickOnEnter boolean | undefined If true, pressing the enter key will trigger a click on the button.
clickOnSpace boolean | undefined If true, pressing the space key will trigger a click on the button.

BreadcrumbsOptions

No props to show