Breadcrumbs

Breadcrumbs say where a page sits, and offer the way back up. They are for a hierarchy the site already has — not for a sequence of steps, which is a different thing and reads better as progress.

import { Breadcrumbs, BreadcrumbsItem } from "ropav";

1. Home
2. Products
3. Electronics
4. Laptop

breadcrumbs-basic.vue

<script setup lang="ts">
import { Breadcrumbs, BreadcrumbsItem } from "ropav";

const trail = [
  { href: "#", name: "Home" },
  { href: "#", name: "Products" },
  { href: "#", name: "Electronics" },
  { name: "Laptop" },
];
</script>

<template>
  <Breadcrumbs>
    <BreadcrumbsItem v-for="crumb in trail" :key="crumb.name" :href="crumb.href">
      {{ crumb.name }}
    </BreadcrumbsItem>
  </Breadcrumbs>
</template>

The last item is the current page, and the component works that out rather than asking. It marks it aria-current="page", disables it so it cannot navigate to where you already are, and leaves off the separator after it. Give the last item no href and there is nothing left to say.

Each item is a Link underneath, so target, rel, download and the rest of a link's props are accepted on BreadcrumbsItem and behave the same way — including RouterProvider, which a breadcrumb navigates through like any other link.

A separator of your own

separator takes plain text, which is rendered as-is, or a component, which is rendered with the separator's own class. The default is a chevron.

1. Home/
2. Products/
3. Laptop/

breadcrumbs-separator.vue

<script setup lang="ts">
import { Breadcrumbs, BreadcrumbsItem } from "ropav";
</script>

<template>
  <Breadcrumbs separator="/">
    <BreadcrumbsItem href="#">Home</BreadcrumbsItem>
    <BreadcrumbsItem href="#">Products</BreadcrumbsItem>
    <BreadcrumbsItem>Laptop</BreadcrumbsItem>
  </Breadcrumbs>
</template>

Accessibility

• The list is an <ol> named "Breadcrumbs" in the reader's language. aria-label replaces that name where the page has more than one trail on it.
• Items are read in document order and the current one is worked out from it, so reordering the markup moves the current page with it.
• is-disabled on the root disables every link at once, for a trail that is on screen while the page it belongs to is still loading.

API

Breadcrumbs

Prop	Type	Default	Description
ariaLabel	string	—	Accessible name for the list. Defaults to the localized word “Breadcrumbs”.
ariaLabelledby	string	—
isDisabled	boolean	—	Disables every breadcrumb link.
separator	unknown	—	A component rendered between items. Plain text is rendered without a wrapper.

Slots: default.

Event	Payload
action	string | number

BreadcrumbsItem

Prop	Type	Default	Description
ariaDescribedby	string	—
ariaLabel	string	—
ariaLabelledby	string	—
download	string | boolean	—
href	string	—	Where the link goes. Without one the link renders as a span with a link role.
hrefLang	string	—
id	BreadcrumbKey	—	Key reported by the root's action event. A stable id is generated when omitted.
isDisabled	boolean	—	Whether the link is disabled. A disabled link renders as a span rather than an anchor, so there is no href for the browser to follow, matching React.
ping	string	—
referrerPolicy	"" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url"	—
rel	string	—
routerOptions	unknown	—	Passed through to the router's navigate alongside the href, for whatever options the application's router accepts. Ignored without a RouterProvider above.
target	string	—

The default slot receives:

Slot prop	Type
isCurrent	boolean
isDisabled	boolean

Event	Payload
click	MouseEvent