Breadcrumb

Install

Run the following command to install the breadcrumb component:

npx acc-nuxt add Breadcrumb

Basic Usage

With Icons

Custom Separator

Popover Slot

When there are more than 4 items, the breadcrumb collapses the middle items into the popover slot. The slot receives the hidden items so you can render a menu. There is a default implementation provided inside the template file, but you can customize it by providing your own content.

Current Route Highlighting

The breadcrumb automatically highlights items that match the current route. Items are automatically detected as active when their to matches the current URL, or when they are the last item without a to.

Overflow Behavior

Control how breadcrumbs behave when they exceed the container width using the overflow prop. Set to wrap (default) to wrap items to the next line, or truncate to truncate long labels with ellipsis.

Auto Generate (Default)

The breadcrumb component automatically generates breadcrumbs from the current route by default (auto is true). The component parses the URL path and creates items for each segment, only including segments that correspond to actual Nuxt pages. Query parameters and hash fragments are automatically stripped from the links.

Customizing Auto Labels with definePageMeta

When using auto mode, you can customize breadcrumb labels for specific pages using definePageMeta. The component resolves labels in the following priority order:

1. meta.breadcrumb (string) - Explicit breadcrumb label
2. meta.title (string) - Page title as fallback
3. URL segment - Formatted URL segment (e.g., "my-page" → "My Page")

<!-- pages/users/[id].vue -->
<script setup lang="ts">
definePageMeta({
  breadcrumb: 'User Details', // Highest priority
  // or
  title: 'User Profile',      // Fallback if breadcrumb not set
});
</script>

<template>
  <!-- Breadcrumb will show "User Details" instead of the dynamic :id -->
  <AcceleratorBreadcrumb />
</template>

Custom Home Label

When using auto mode, you can customize the home label using the homeLabel prop.

Slots

The breadcrumb component provides the following slots for customization.

Props

CSS Variables

Customize the breadcrumb appearance using CSS variables.