Breadcrumb Menu

Each breadcrumb segment doubles as a dropdown showing sibling pages at that hierarchy level. Dropdown panels match dropdown-menu styling.

Components

Breadcrumb Menu

navigation

interactive

<arc-breadcrumb-menu>

Overview

BreadcrumbMenu extends the standard breadcrumb pattern by turning each segment into a clickable dropdown trigger. When a user hovers or clicks a segment, a dropdown panel appears listing sibling pages at that hierarchy level — giving users the ability to navigate laterally within any tier of the information architecture without backtracking to a parent page first. The dropdown panels use the same styling as DropdownMenu for visual consistency across the design system. This pattern is common in file managers, CMS interfaces, and documentation sites where the hierarchy is deep and users frequently need to switch between sibling items at the same depth. Instead of navigating up to a parent and then back down to a sibling, BreadcrumbMenu provides a direct shortcut that saves clicks and preserves context. Each item in the `items` array can optionally include a `siblings` array. When siblings are present, the segment renders a dropdown trigger with a subtle chevron indicator. When siblings are absent, the segment behaves as a standard breadcrumb link. The component dispatches `arc-navigate` with the selected href whenever a dropdown item or breadcrumb link is clicked, enabling client-side routing integration.

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

Do not add siblings to every level — only include them where lateral navigation is meaningful
Do not use BreadcrumbMenu when the hierarchy is flat (two levels or fewer) — use Breadcrumb instead
Do not nest dropdown panels within dropdown panels — keep it to one level of expansion
Do not omit the href on the final breadcrumb segment — it should link to the current page
Do not 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: `
    <arc-breadcrumb-menu
      [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

label string ='Breadcrumb'
items Array<{label: string, href?: string, siblings?: Array<{label: string, href?: string}>}> =[]: Array of breadcrumb items. Each item has a label and href. Optionally include a siblings array to enable a dropdown at that level.

Events

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

Breadcrumb Menu

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

Docs

Project

Arclight