Breadcrumbs

A breadcrumb trail showing a page's location within a hierarchy. Renders a <nav aria-label="Breadcrumb"> with an ordered list, a default chevron separator, and three size variants.

Installation

npm install @xsolla/xui-breadcrumbs

Imports

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

Quick start

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

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

API Reference

<Breadcrumbs>

| Prop | Type | Default | Description | | --- | --- | --- | --- | | items | BreadcrumbItem[] | - | Trail items, ordered root-to-current. Required. | | size | 'sm' \| 'md' \| 'lg' | 'md' | Font / icon size preset (12/14/16px text). | | stretched | boolean | false | Centre the trail and stretch the container to full width. | | separator | ReactNode | chevron icon | Custom separator placed between items (rendered aria-hidden). | | backgroundColor | string | - | Container background colour. | | testID | string | - | Test identifier. |

Inherits ThemeOverrideProps (themeMode, themeProductContext).

BreadcrumbItem

| Field | Type | Description | | --- | --- | --- | | label | string | Display text. Required. | | href | string | Link target. Ignored when the item is the last in items (the active item never renders a hyperlink). | | onClick | () => void | Click handler. Not invoked when the item is active or disabled. When href is also provided, preventDefault() is called before invoking — browser navigation is suppressed, so handle navigation yourself. | | disabled | boolean | Reduces opacity, removes tab stop, and prevents interaction. |

Active-item behaviour

The last item in items is treated as the current page. It renders without an href or click handler, gets aria-current="page", and is excluded from the tab order regardless of any href/onClick you pass.

Examples

Sizes

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

const items = [
  { label: 'Home', href: '/' },
  { label: 'Products', href: '/products' },
  { label: 'Details' },
];

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

Click handlers (router integration)

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

export default function Example() {
  const navigate = (path: string) => {
    // your router's navigate fn
  };

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

Disabled item

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

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

Accessibility

• Container is <nav aria-label="Breadcrumb"> wrapping a semantic <ol>.
• The active (last) item carries aria-current="page" and is not focusable.
• Separators are decorative (aria-hidden).
• Disabled items are removed from the tab order (tabIndex={-1}).
• Items with href render as <a role="link">; items without href render as <div role="button" tabIndex={0}> — keyboard activation depends on the host environment, prefer href when navigating to a real URL.