Vivid API

Breadcrumb

Links showing the position of the current page within the navigational hierarchy.

This component was tested and signed off by Applause (external accessibility specialists).

Implementation

  • aria-current
    • Always add aria-current="page" to the last Breadcrumb Item when it has a href.
    • This identifies the current page within the breadcrumb trail.
  • aria-label
    • By default, the Breadcrumbs component uses aria-label="breadcrumbs".
    • You can override this value if a different label is more descriptive in context.

Resources