Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelogApp ShellAspect GridAuth ShellCenterContainerDashboard GridFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbarAnchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkStepper NavTabsTop BarTree ViewAccordionAspect RatioAvatarAvatar GroupCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSkeletonSpinnerStackVideoVirtual ListActivity HeatmapAnimated NumberBadgeBar ListChartClockComparisonCountdown TimerData GridDescription ListDiffGaugeJSON TreeKanbanLevel MeterListMeterSparklineStatStepperTagTimelineUptimeValue CardWaveformBlockquoteCode BlockCode GroupGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriterButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerField ListFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree SelectAlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuHover CardLoading OverlayNotification PanelPopoverProgressSheetToastTooltip
ARC UIARC Radiant Components
v4.9DocsComponentsTokensSynthesizer
Getting StartedFrameworksServer RenderingDesign TokensThemingTheme SynthesizerTypographyUtilitiesAll ComponentsAccessibilityBrowser SupportChangelogContributingStatsApp ShellAspect GridAuth ShellCenterContainerDashboard GridFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbarAnchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkStepper NavTabsTop BarTree ViewAccordionAspect RatioAvatarAvatar GroupCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSkeletonSpinnerStackVideoVirtual ListActivity HeatmapAnimated NumberBadgeBar ListChartClockComparisonCountdown TimerData GridDescription ListDiffGaugeJSON TreeKanbanLevel MeterListMeterSparklineStatStepperTagTimelineUptimeValue CardWaveformBlockquoteCode BlockCode GroupGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriterButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerField ListFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree SelectAlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuHover CardLoading OverlayNotification PanelPopoverProgressSheetToastTooltip

Breadcrumb

Navigation trail that shows the user's current location in a page hierarchy, with separator icons and current-page indication.

ComponentsBreadcrumb
navigationhybrid
<arc-breadcrumb>

Overview

Breadcrumbs are a secondary navigation pattern that reveals the user's position inside a site hierarchy. Each crumb is a clickable link back to a parent page, separated by a visual divider, with the final crumb representing the current page. Users can see where they are and jump several levels up without repeatedly hitting the browser back button. The component renders a `<nav>` landmark with `aria-label="Breadcrumb"` and marks the last item with `aria-current="page"`, following the WAI-ARIA Breadcrumb pattern. Separator characters are injected automatically and hidden from assistive technology with `aria-hidden="true"`, so screen readers announce a list of links instead of reading out each slash or chevron. Breadcrumbs work best alongside a primary navigation element like a sidebar or top bar. They do not replace top-level navigation. They answer "where am I?" once the user has drilled into a deep page. In applications with a flat structure (fewer than two levels), breadcrumbs add clutter and should be omitted.

Guidelines

When to use

  • Place breadcrumbs near the top of the page, above the main content heading, so users see their location before engaging with page content
  • Always include the root page (e.g. "Dashboard" or "Home") as the first crumb to anchor the trail
  • Keep crumb labels short: one or two words that match the actual page title so users can predict where each link goes
  • Use breadcrumbs in apps with three or more levels of hierarchy where users frequently navigate between depths
  • Listen for the `arc-navigate` event to handle route changes in single-page applications instead of relying on full page navigations

When not to use

  • Do not use breadcrumbs as a replacement for primary navigation; they are a supplementary wayfinding aid
  • Avoid making the current (last) crumb a clickable link; it represents the page the user is already on
  • Do not show breadcrumbs on top-level pages with no parent; a single crumb provides no navigational value
  • Avoid duplicating breadcrumbs and a back button in the same spot. Pick one pattern to reduce visual noise
  • Do not include more than five or six levels in a single trail; deep trails suggest an information architecture that is too nested

Features

  • Automatic separator icons inserted between crumb items, with no manual markup
  • Current-page indication via `aria-current="page"` on the last item with distinct font weight
  • Fires `arc-navigate` custom event on crumb click, for SPA routing without full page reloads
  • Wraps on narrow viewports using flex-wrap so long trails never overflow
  • Renders a semantic `<nav>` landmark with `aria-label="Breadcrumb"` for assistive technology
  • Separator characters hidden from screen readers with `aria-hidden="true"`
  • Focus-visible ring on each link for keyboard-only users
  • Declarative slotted API: compose `<arc-breadcrumb-item>` children in any template language
  • CSS custom-property theming for text color, separator color, and spacing via design tokens

Preview

Dashboard Projects ARC UI Settings

Usage

Layout and styling work without JavaScript via the HTML/CSS versions. Interactive features like events and state management require the Web Component or a framework wrapper.

<arc-breadcrumb>
  <arc-breadcrumb-item href="/dashboard">Dashboard</arc-breadcrumb-item>
  <arc-breadcrumb-item href="/dashboard/projects">Projects</arc-breadcrumb-item>
  <arc-breadcrumb-item href="/dashboard/projects/arc-ui">ARC UI</arc-breadcrumb-item>
  <arc-breadcrumb-item>Settings</arc-breadcrumb-item>
</arc-breadcrumb>

API

separatorstring'/'
Character used as the separator between breadcrumb items. Common options: '/', '>', '•'.
labelstring'Breadcrumb'

Events

arc-navigate
Fired when a breadcrumb item is clicked

BreadcrumbItem

<arc-breadcrumb-item>

An individual crumb inside a Breadcrumb trail. Each item represents one level of the page hierarchy. Items with an `href` render as clickable links; the item without an `href` (typically the last one) is treated as the current page and displayed with stronger visual weight.

resolvedHref
Destination, preferring the explicit attribute over an anchor child. Authoring <arc-breadcrumb-item><a href="/docs">Docs</a></arc-breadcrumb-item> leaves a working trail in the pre-upgrade markup; arc-breadcrumb hides this light DOM only once it has re-rendered it into shadow DOM.
label
textContent already reaches through an anchor child, so this needs no special case.
hrefstring''
Navigation URL for this crumb. When provided, the crumb renders as a clickable link styled in muted text that brightens on hover. Omit this property on the final item to mark it as the current page; it will receive aria-current="page" and the primary text color automatically.

See Also

ARC UI

Components that glow.One Lit source, seven native targets.

Docs

Project

Arclight

© 2026 Arclight Digital, LLC. All rights reserved.

Documentation generated with AI assistance and reviewed by humans. Found an issue? Open a GitHub issue.

Privacy Policy