Breadcrumb

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

import { JBreadcrumb } from '@juxtui/ui'

Usage #

<JBreadcrumb :items="[
  { label: 'Projects', href: '/projects' },
  { label: 'juxt-ui', href: '/projects/juxt-ui' },
  { label: 'Settings' },
]" />

Omit href on the last item — it renders as the current page instead of a link.

Without items, pass your own <li class="j-breadcrumb__item"> elements into the default slot for full control over each crumb.

Variants & examples #

Collapsed#

Past max-items, the middle of the trail collapses to an ellipsis, keeping the first crumb and a tail of the most recent ones.

<script setup lang="ts">
const items = [
  { label: 'Home', href: '#' },
  { label: 'Projects', href: '#' },
  { label: 'juxt-ui', href: '#' },
  { label: 'Components', href: '#' },
  { label: 'Breadcrumb' },
]
</script>

<template>
  <JBreadcrumb :items="items" :max-items="4" />
</template>

Custom crumbs#

Built by hand with the default slot — here the first crumb carries an icon.

<script setup lang="ts">
import { Home } from '@lucide/vue'
</script>

<template>
  <JBreadcrumb label="Breadcrumb">
    <li class="j-breadcrumb__item">
      <a href="#" class="j-breadcrumb__link j-focusable" aria-label="Home">
        <Home class="size-3.5" />
      </a>
    </li>
    <li class="j-breadcrumb__item">
      <a href="#" class="j-breadcrumb__link j-focusable">Projects</a>
    </li>
    <li class="j-breadcrumb__item">
      <span class="j-breadcrumb__current" aria-current="page">juxt-ui</span>
    </li>
  </JBreadcrumb>
</template>

API #

Props

Slots

Accessibility #

• Wrapped in a <nav> landmark labelled “Breadcrumb” by default.
• Items are a real <ol>/<li> list; the current page uses aria-current="page" and is not a link.
• Separators between crumbs are decorative (::before), not characters, so they aren’t announced.