Breadcrumb Menu

Components

Breadcrumb Menu

navigation

interactive

<arc-breadcrumb-menu>

Overview

Guidelines

When to use

Provide siblings arrays for levels where lateral navigation is useful
Keep sibling lists to ten items or fewer per dropdown
Use BreadcrumbMenu in file managers, CMS interfaces, and documentation hubs
Listen for arc-navigate to integrate with your client-side router
Highlight the current page in the siblings list for orientation

When not to use

Add siblings to every level — only include them where lateral navigation is meaningful
Use BreadcrumbMenu when the hierarchy is flat (two levels or fewer) — use Breadcrumb instead
Nest dropdown panels within dropdown panels — keep it to one level of expansion
Omit the href on the final breadcrumb segment — it should link to the current page
Replace primary navigation (TopBar, Sidebar) with BreadcrumbMenu — it is a secondary aid

Features

Breadcrumb segments double as dropdown triggers for sibling navigation
Dropdown panels match DropdownMenu styling for consistency
Optional siblings array per breadcrumb item
arc-navigate event for client-side routing integration
Hover and click trigger modes for mouse and touch devices
Keyboard accessible with arrow keys within dropdowns
Chevron indicator on segments that have sibling options
Automatic Escape-to-close and outside-click dismissal
Token-driven theming via CSS custom properties

Preview

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<script type="module" src="@arclux/arc-ui"></script>

<arc-breadcrumb-menu
  id="crumbs"
  items='[
    { "label": "Home", "href": "/" },
    { "label": "Products", "href": "/products", "siblings": [
      { "label": "Solutions", "href": "/solutions" },
      { "label": "Pricing", "href": "/pricing" }
    ]},
    { "label": "Analytics", "href": "/products/analytics" }
  ]'
></arc-breadcrumb-menu>

<script>
  document.querySelector('#crumbs').addEventListener('arc-navigate', (e) => {
    console.log('navigate to:', e.detail.href);
  });
</script>

import { BreadcrumbMenu } from '@arclux/arc-ui-react';

const items = [
  { label: 'Home', href: '/' },
  {
    label: 'Products',
    href: '/products',
    siblings: [
      { label: 'Solutions', href: '/solutions' },
      { label: 'Pricing', href: '/pricing' },
    ],
  },
  { label: 'Analytics', href: '/products/analytics' },
];

export function PageBreadcrumbs() {
  return (
    <BreadcrumbMenu
      items={items}
      onArcNavigate={(e) => console.log('navigate:', e.detail.href)}
    />
  );
}

<script setup>
import { BreadcrumbMenu } from '@arclux/arc-ui-vue';

const items = [
  { label: 'Home', href: '/' },
  {
    label: 'Products',
    href: '/products',
    siblings: [
      { label: 'Solutions', href: '/solutions' },
      { label: 'Pricing', href: '/pricing' },
    ],
  },
  { label: 'Analytics', href: '/products/analytics' },
];

function onNavigate(e) {
  console.log('navigate:', e.detail.href);
}
</script>

<template>
  <BreadcrumbMenu :items="items" @arc-navigate="onNavigate" />
</template>

<script>
  import { BreadcrumbMenu } from '@arclux/arc-ui-svelte';

  const items = [
    { label: 'Home', href: '/' },
    {
      label: 'Products',
      href: '/products',
      siblings: [
        { label: 'Solutions', href: '/solutions' },
        { label: 'Pricing', href: '/pricing' },
      ],
    },
    { label: 'Analytics', href: '/products/analytics' },
  ];
</script>

<BreadcrumbMenu
  {items}
  on:arc-navigate={(e) => console.log('navigate:', e.detail.href)}
/>

import { Component } from '@angular/core';
import { BreadcrumbMenu } from '@arclux/arc-ui-angular';

@Component({
  imports: [BreadcrumbMenu],
  template: `
    <BreadcrumbMenu
      [items]="items"
      (arc-navigate)="onNavigate($event)"
    />
  `,
})
export class PageBreadcrumbsComponent {
  items = [
    { label: 'Home', href: '/' },
    {
      label: 'Products',
      href: '/products',
      siblings: [
        { label: 'Solutions', href: '/solutions' },
        { label: 'Pricing', href: '/pricing' },
      ],
    },
    { label: 'Analytics', href: '/products/analytics' },
  ];

  onNavigate(e: CustomEvent) {
    console.log('navigate:', e.detail.href);
  }
}

import { BreadcrumbMenu } from '@arclux/arc-ui-solid';

const items = [
  { label: 'Home', href: '/' },
  {
    label: 'Products',
    href: '/products',
    siblings: [
      { label: 'Solutions', href: '/solutions' },
      { label: 'Pricing', href: '/pricing' },
    ],
  },
  { label: 'Analytics', href: '/products/analytics' },
];

export function PageBreadcrumbs() {
  return (
    <BreadcrumbMenu
      items={items}
      onArcNavigate={(e) => console.log('navigate:', e.detail.href)}
    />
  );
}

import { BreadcrumbMenu } from '@arclux/arc-ui-preact';

const items = [
  { label: 'Home', href: '/' },
  {
    label: 'Products',
    href: '/products',
    siblings: [
      { label: 'Solutions', href: '/solutions' },
      { label: 'Pricing', href: '/pricing' },
    ],
  },
  { label: 'Analytics', href: '/products/analytics' },
];

export function PageBreadcrumbs() {
  return (
    <BreadcrumbMenu
      items={items}
      onArcNavigate={(e) => console.log('navigate:', e.detail.href)}
    />
  );
}

API

Prop	Type	Default	Description
`items`	`Array<{ label, href, siblings? }>`	`[]`	Array of breadcrumb items. Each item has a label and href. Optionally include a siblings array to enable a dropdown at that level.

Events

Event	Description
`arc-navigate`	Fired when a breadcrumb link or dropdown item is clicked with detail: { href }.

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

ARC UI

Arclight