Breadcrumb

Overview

The Breadcrumb component is a core building block of the Byteion design system, providing a robust, accessibility-compliant interface for its specific UI capabilities.

Why this exists

Breadcrumbs show the user's location in a hierarchy and provide quick backward navigation. They reduce disorientation in deep navigation trees.

Mental model

When to use

When not to use

Basic example

The following example demonstrates standard usage, fully compliant with Byteion's token-first approach.

import { Breadcrumb, BreadcrumbItem } from '@byteion/react';

export default function BreadcrumbDemo() {
  return (
    <Breadcrumb className="p-6">
      <BreadcrumbItem href="/">Home</BreadcrumbItem>
      <BreadcrumbItem href="/projects">Projects</BreadcrumbItem>
      <BreadcrumbItem href="/projects/alpha">Alpha</BreadcrumbItem>
      <BreadcrumbItem current>Settings</BreadcrumbItem>
    </Breadcrumb>
  );
}

<script setup lang="ts">
import { Breadcrumb, BreadcrumbItem } from '@byteion/vue';
</script>

<template>
  <Breadcrumb class="p-6">
    <BreadcrumbItem href="/">Home</BreadcrumbItem>
    <BreadcrumbItem href="/projects">Projects</BreadcrumbItem>
    <BreadcrumbItem href="/projects/alpha">Alpha</BreadcrumbItem>
    <BreadcrumbItem current>Settings</BreadcrumbItem>
  </Breadcrumb>
</template>

States

This component reacts seamlessly to the following interaction and data states:

• default — Resting appearance before interaction.
• current — current state.
• hover — Pointer is over the element — visual feedback via color or shadow.
• focus — Keyboard or tab focus — shows ring indicator for accessibility.
• active — Currently selected or in use.
• disabled — Non-interactive — grayed out, cursor not-allowed.

Anatomy

Usage guidelines

• Show no more than 4 levels.
• Current page should not be a link.
• Use chevron or slash separator consistently.

Do and Don't

Accessibility

Uses <nav aria-label="Breadcrumb">. Current item has aria-current="page".

Customization

Separator and text color follow muted tokens.

import { cva, cn, type VariantProps } from '@byteion/react';

const myBreadcrumb = cva('base classes…', {
 variants: {
  accent: { soft:'border-primary-200', loud:'border-primary-500' },
 },
 defaultVariants: { accent:'soft' },
});

type Props = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof myBreadcrumb>;

<script setup lang="ts">
import { computed, useAttrs } from 'vue';
import { cva, type VariantProps } from '@byteion/vue';

interface Props { accent?:'soft' |'loud' }
const props = withDefaults(defineProps<Props>(), { accent:'soft' });
const attrs = useAttrs();

const myBreadcrumb = cva('base classes…', {
  variants: { accent: { soft:'border-primary-200', loud:'border-primary-500' } },
});

const cls = computed(() => myBreadcrumb({ accent: props.accent, class: attrs.class as string | undefined }));
</script>

Runtime events

Byteion keeps framework APIs idiomatic: HTML uses DOM custom events, React uses callback props, and Vue uses emitted events / v-model updates.

Remote / AJAX

API Reference

Static HTML. No JS required.

export interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
  /** Separator rendered between items. Defaults to a chevron. */
  separator?: ReactNode | 'chevron' | 'slash' | 'dot' | 'arrow';
  /** Styling variant for items. */
  variant?: 'default' | 'muted' | 'bold';
  children?: ReactNode;
}

export interface BreadcrumbProps {
  /** Separator rendered between items. Defaults to a chevron.
   *  Use the named `separator` slot for fully custom separator nodes. */
  separator?: 'chevron' | 'slash' | 'dot' | 'arrow';
  /** Styling variant for items. */
  variant?: 'default' | 'muted' | 'bold';
}

Developer tips

Common mistakes

Production usage tips

Premium examples

Advanced patterns available in Byteion Pro:

Related components

• Navbar
• Sidebar
• Tabs
• Stepper
• Pagination