I9kBreadcrumb

A breadcrumb trail in a named navigation landmark: every step but the last links back, and the last is the current page.

View as MarkdownView source

import { I9kBreadcrumb } from '@9klabs/design';

Examples

Course / lesson

1. Leveraging AI for Development/
2. Hello, Agent

<I9kBreadcrumb
  :items="[
    { id: 'course', label: 'Leveraging AI for Development', href: '/courses/ai' },
    { id: 'lesson', label: 'Hello, Agent' },
  ]"
/>

Arabic RTL

1. هندسة البرمجيات مع الذكاء الاصطناعي/
2. الدرس الأول

<div dir="rtl" lang="ar">
  <I9kBreadcrumb
    label="مسار التنقّل"
    :items="[
      { id: 'course', label: 'هندسة البرمجيات مع الذكاء الاصطناعي', href: '/courses/ai' },
      { id: 'lesson', label: 'الدرس الأول' },
    ]"
  />
</div>

Watch out

• The last item is always the current page, even when it has an href; put the page you are on last.
• Without linkComponent the steps are plain <a href>, so in a router app every click is a full page load.
• Pass label in the page language; the default is English.

API

Props

Prop	Type	Default	Required
items	I9kBreadcrumbItem[]	—	yes
label	string	'Breadcrumb'	no
linkComponent	string | object | null	null	no

Types

export interface I9kBreadcrumbItem {
  id: string;
  label: string;
  /** Rendered as a link on every item but the last. */
  href?: string;
}

Agent prompt

Paste this into an agent to have it use the component correctly. It is self-contained.

Use I9kBreadcrumb from @9klabs/design to show where the current page sits, for example course / lesson in a slim top bar.

import { I9kBreadcrumb, type I9kBreadcrumbItem } from '@9klabs/design';

Props:
- items: I9kBreadcrumbItem[] (required) — { id: string; label: string; href?: string }, outermost first. Every item but the last renders as a link when it has an href. The last item is always the current page: a <span aria-current="page">, never a link.
- label?: string (default 'Breadcrumb') — the navigation landmark's accessible name. Pass it in the page's language.
- linkComponent?: string | object | null (default null) — render the links with this component (RouterLink, NuxtLink), which receives the destination as `to`. Pass the imported component, not its name.

Behavior: separators are aria-hidden. Long labels truncate with an ellipsis and keep the full text in a title.

Usage:
<I9kBreadcrumb
  label="Breadcrumb"
  :link-component="NuxtLink"
  :items="[{ id: 'course', label: 'Leveraging AI', href: '/courses/ai' }, { id: 'lesson', label: 'Hello, Agent' }]"
/>