Breadcrumbs

A cross-platform React breadcrumbs navigation component that displays the current page location within a hierarchical structure. Supports custom separators and click handlers.

Installation

npm install @xsolla/xui-breadcrumbs
# or
yarn add @xsolla/xui-breadcrumbs

Demo

Basic Breadcrumbs

import * as React from 'react';
import { Breadcrumbs } from '@xsolla/xui-breadcrumbs';

export default function BasicBreadcrumbs() {
  return (
    <Breadcrumbs
      items={[
        { label: 'Home', href: '/' },
        { label: 'Products', href: '/products' },
        { label: 'Category', href: '/products/category' },
        { label: 'Current Page' },
      ]}
    />
  );
}

With Click Handlers

import * as React from 'react';
import { Breadcrumbs } from '@xsolla/xui-breadcrumbs';

export default function ClickableBreadcrumbs() {
  const handleNavigate = (path: string) => {
    console.log('Navigate to:', path);
  };

  return (
    <Breadcrumbs
      items={[
        { label: 'Home', onClick: () => handleNavigate('/') },
        { label: 'Settings', onClick: () => handleNavigate('/settings') },
        { label: 'Profile' },
      ]}
    />
  );
}

Stretched Layout

import * as React from 'react';
import { Breadcrumbs } from '@xsolla/xui-breadcrumbs';

export default function StretchedBreadcrumbs() {
  return (
    <div style={{ width: '100%' }}>
      <Breadcrumbs
        stretched={true}
        items={[
          { label: 'Home', href: '/' },
          { label: 'Dashboard', href: '/dashboard' },
          { label: 'Reports' },
        ]}
      />
    </div>
  );
}

Anatomy

import { Breadcrumbs } from '@xsolla/xui-breadcrumbs';

<Breadcrumbs
  items={[                      // Array of breadcrumb items
    { label: 'Home', href: '/' },
    { label: 'Current' },
  ]}
  size="md"                     // Size variant
  stretched={false}             // Center and stretch to full width
  separator={<CustomIcon />}    // Custom separator element
  backgroundColor="transparent" // Background color
/>

Examples

Breadcrumbs Sizes

import * as React from 'react';
import { Breadcrumbs } from '@xsolla/xui-breadcrumbs';

export default function BreadcrumbsSizes() {
  const items = [
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'Details' },
  ];

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <Breadcrumbs size="sm" items={items} />
      <Breadcrumbs size="md" items={items} />
      <Breadcrumbs size="lg" items={items} />
    </div>
  );
}

Custom Separator

import * as React from 'react';
import { Breadcrumbs } from '@xsolla/xui-breadcrumbs';

export default function CustomSeparator() {
  return (
    <Breadcrumbs
      separator={<span style={{ margin: '0 8px' }}>/</span>}
      items={[
        { label: 'Home', href: '/' },
        { label: 'Category', href: '/category' },
        { label: 'Item' },
      ]}
    />
  );
}

With Disabled Items

import * as React from 'react';
import { Breadcrumbs } from '@xsolla/xui-breadcrumbs';

export default function DisabledBreadcrumbs() {
  return (
    <Breadcrumbs
      items={[
        { label: 'Home', href: '/' },
        { label: 'Restricted', disabled: true },
        { label: 'Current Page' },
      ]}
    />
  );
}

API Reference

Breadcrumbs

Breadcrumbs Props:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | items | BreadcrumbItem[] | - | Required. Array of breadcrumb items. | | size | "sm" \| "md" \| "lg" | "md" | Size variant. | | stretched | boolean | false | Center content and stretch to full width. | | separator | ReactNode | Chevron icon | Custom separator element. | | backgroundColor | string | - | Background color. | | testID | string | - | Test identifier. |

BreadcrumbItem Interface:

interface BreadcrumbItem {
  label: string;        // Display text
  href?: string;        // Link URL
  onClick?: () => void; // Click handler
  disabled?: boolean;   // Disabled state
}

Behavior

• Last item is always displayed as active/current page
• Non-last items are clickable (via href or onClick)
• Disabled items show reduced opacity and aren't clickable
• Separator appears between each item

Accessibility

• Uses <nav> element with aria-label="Breadcrumb"
• Uses <ol> for semantic list structure
• Current page has aria-current="page"
• Non-active items have proper link/button roles
• Separators are hidden from screen readers