Breadcrumb

Show users exactly where they are within a page hierarchy and give them a quick path back to any parent level. Breadcrumbs are especially valuable in applications with deep navigation structures, where the sidebar alone does not make the current location obvious.

import { CoarBreadcrumb, CoarBreadcrumbItem } from '@cocoar/vue-ui';

Basic Usage

Wrap each level in a CoarBreadcrumbItem. Parent levels are rendered as links; the last item is marked active to indicate the current page. Separators between items are handled automatically.

1. Home
2. Users
3. John Doe

vue

<template>
  <CoarBreadcrumb>
    <CoarBreadcrumbItem><a href="javascript:void(0)">Home</a></CoarBreadcrumbItem>
    <CoarBreadcrumbItem><a href="javascript:void(0)">Users</a></CoarBreadcrumbItem>
    <CoarBreadcrumbItem :active="true">John Doe</CoarBreadcrumbItem>
  </CoarBreadcrumb>
</template>

<script setup lang="ts">
import { CoarBreadcrumb, CoarBreadcrumbItem } from '@cocoar/vue-ui';
</script>

Deep Hierarchy

Breadcrumbs scale naturally for deeply nested content. Even a five-level trail remains compact and readable, giving users confidence about their location.

1. Home
2. Products
3. Electronics
4. Laptops
5. MacBook Pro 16"

vue

<template>
  <CoarBreadcrumb>
    <CoarBreadcrumbItem><a href="javascript:void(0)">Home</a></CoarBreadcrumbItem>
    <CoarBreadcrumbItem><a href="javascript:void(0)">Products</a></CoarBreadcrumbItem>
    <CoarBreadcrumbItem><a href="javascript:void(0)">Electronics</a></CoarBreadcrumbItem>
    <CoarBreadcrumbItem><a href="javascript:void(0)">Laptops</a></CoarBreadcrumbItem>
    <CoarBreadcrumbItem :active="true">MacBook Pro 16"</CoarBreadcrumbItem>
  </CoarBreadcrumb>
</template>

<script setup lang="ts">
import { CoarBreadcrumb, CoarBreadcrumbItem } from '@cocoar/vue-ui';
</script>

App Navigation

Here are several breadcrumb paths you might encounter in a real application -- from a simple two-level dashboard path to a four-level project issue drill-down.

1. Dashboard
2. Overview

1. Settings
2. Account
3. Security

1. Projects
2. Alpha
3. Issues
4. #142 Fix date picker

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 16px;">
    <CoarBreadcrumb>
      <CoarBreadcrumbItem><a href="javascript:void(0)">Dashboard</a></CoarBreadcrumbItem>
      <CoarBreadcrumbItem :active="true">Overview</CoarBreadcrumbItem>
    </CoarBreadcrumb>
    <CoarBreadcrumb>
      <CoarBreadcrumbItem><a href="javascript:void(0)">Settings</a></CoarBreadcrumbItem>
      <CoarBreadcrumbItem><a href="javascript:void(0)">Account</a></CoarBreadcrumbItem>
      <CoarBreadcrumbItem :active="true">Security</CoarBreadcrumbItem>
    </CoarBreadcrumb>
    <CoarBreadcrumb>
      <CoarBreadcrumbItem><a href="javascript:void(0)">Projects</a></CoarBreadcrumbItem>
      <CoarBreadcrumbItem><a href="javascript:void(0)">Alpha</a></CoarBreadcrumbItem>
      <CoarBreadcrumbItem><a href="javascript:void(0)">Issues</a></CoarBreadcrumbItem>
      <CoarBreadcrumbItem :active="true">#142 Fix date picker</CoarBreadcrumbItem>
    </CoarBreadcrumb>
  </div>
</template>

<script setup lang="ts">
import { CoarBreadcrumb, CoarBreadcrumbItem } from '@cocoar/vue-ui';
</script>

Accessibility

Keyboard Navigation

Key	Action
Tab	Move between breadcrumb links
Enter	Activate the focused link
Shift + Tab	Move focus backward

API

CoarBreadcrumb Props

Prop	Type	Default	Description
separator	string	'/'	Separator character between items
ariaLabel	string	'Breadcrumb'	Accessible label for the nav landmark

CoarBreadcrumbItem Props

Prop	Type	Default	Description
active	boolean	false	Mark as the current/active page (not a link)

CoarBreadcrumbItem Slots

Slot	Description
default	Item content -- typically an anchor tag for links, or plain text for the active item