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, so users can move sideways within any tier without going back to a parent page first. The dropdown panels use the same styling as DropdownMenu. 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 gives a direct shortcut that saves clicks and keeps 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, so you can hook it into client-side routing.

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
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

labelstring='Breadcrumb'
itemsArray<{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