Usage

Import Breadcrumbs and BreadcrumbItem from their dedicated entry.

<script setup lang="ts">
import { BreadcrumbItem, Breadcrumbs } from '@astryx-vue/core/Breadcrumbs'
</script>

<template>
  <Breadcrumbs>
    <BreadcrumbItem href="/">
      Home
    </BreadcrumbItem>
    <BreadcrumbItem href="/components">
      Components
    </BreadcrumbItem>
    <BreadcrumbItem is-current>
      Breadcrumbs
    </BreadcrumbItem>
  </Breadcrumbs>
</template>

Best practices

Guidance	Practice
Recommended	Use semantic <nav> and <ol> markup so screen readers can identify the path.
Recommended	Use is-current for the current page and render it as a <span> with aria-current="page".
Recommended	Keep separators decorative with aria-hidden="true".
Don't	Use overly long labels that wrap awkwardly on small screens.
Don't	Make the current page a clickable link; this creates circular navigation.

Examples

Basic

1. / Home
2. / Components
3. / Breadcrumbs

A standard breadcrumb trail using the default text size.

Supporting variant

1. / Home
2. / Components
3. / Breadcrumbs

The supporting variant uses a smaller text size for compact contexts.