Breadcrumb

Show the current location and its parent path concisely.

<sy-breadcrumb>Installation guide Basic usage

Live preview

Interact with the component to see results here.

Separator

Disable intermediate path

View code

HTML

<sy-breadcrumb separator="slash">
  <sy-breadcrumb-item>Home</sy-breadcrumb-item>
  <sy-breadcrumb-item>Project</sy-breadcrumb-item>
  <sy-breadcrumb-item active>Design System</sy-breadcrumb-item>
</sy-breadcrumb>

Usage guide

Show which parent path contains the current view. Use Navigation for a full menu and Tabs to switch within one area.

Start with the top-level path
Arrange items from the highest-level view to the current view.
Indicate the current location
Set active on the current item. The last separator is hidden automatically. Mark inaccessible items with disabled.
Connect navigation
Read the item element in selected.detail and navigate through your app's router.

Examples

Current location

Parent paths are selectable; active identifies the current page.

View code

HTML

<sy-breadcrumb>
  <sy-breadcrumb-item>Home</sy-breadcrumb-item>
  <sy-breadcrumb-item>Project</sy-breadcrumb-item>
  <sy-breadcrumb-item active>Design System</sy-breadcrumb-item>
</sy-breadcrumb>

Separator

Choose slash or arrow to suit the path presentation.

View code

HTML

<div style="display:grid;gap:16px;width:100%">
  <sy-breadcrumb>
    <sy-breadcrumb-item>Home</sy-breadcrumb-item>
    <sy-breadcrumb-item>Project</sy-breadcrumb-item>
    <sy-breadcrumb-item active>Design System</sy-breadcrumb-item>
  </sy-breadcrumb>
  <sy-breadcrumb separator="arrow">
    <sy-breadcrumb-item>Home</sy-breadcrumb-item>
    <sy-breadcrumb-item>Project</sy-breadcrumb-item>
    <sy-breadcrumb-item active>Design System</sy-breadcrumb-item>
  </sy-breadcrumb>
</div>

Inaccessible path

Disabling an intermediate path preserves the current location's hierarchy.

View code

HTML

<sy-breadcrumb separator="arrow">
  <sy-breadcrumb-item>Home</sy-breadcrumb-item>
  <sy-breadcrumb-item disabled>Project</sy-breadcrumb-item>
  <sy-breadcrumb-item active>Design System</sy-breadcrumb-item>
</sy-breadcrumb>

Per-item separator

An item's separator overrides the parent setting.

View code

HTML

<sy-breadcrumb separator="slash">
  <sy-breadcrumb-item>Home</sy-breadcrumb-item>
  <sy-breadcrumb-item separator="arrow">Project</sy-breadcrumb-item>
  <sy-breadcrumb-item active>Design System</sy-breadcrumb-item>
</sy-breadcrumb>

Events and payloads

Interact with the component and inspect the latest event name and detail. The code includes subscriptions to events emitted by this component and its children.

View code

HTML

<sy-breadcrumb separator="slash">
  <sy-breadcrumb-item>Home</sy-breadcrumb-item>
  <sy-breadcrumb-item>Project</sy-breadcrumb-item>
  <sy-breadcrumb-item active>Design System</sy-breadcrumb-item>
</sy-breadcrumb>
<output id="demo-events" aria-live="polite">Interact with the component to see
  its latest event and payload.</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  for (const name of ["selected"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

Short navigation path

Show a two-level path with an arrow and an active current page.

View code

HTML

<sy-breadcrumb separator="arrow">
  <sy-breadcrumb-item>Home</sy-breadcrumb-item>
  <sy-breadcrumb-item active>Design System</sy-breadcrumb-item>
</sy-breadcrumb>

Feature examples

Choose a feature from 8 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Usage examples · Short navigation path

Show a two-level path with an arrow and an active current page.

View code

HTML

<sy-breadcrumb separator="arrow">
  <sy-breadcrumb-item>Home</sy-breadcrumb-item>
  <sy-breadcrumb-item active>Design System</sy-breadcrumb-item>
</sy-breadcrumb>

API reference

Hover over a name or focus it with the keyboard to see the code. On touch screens, tap the name.

`<sy-breadcrumb>`

Properties

Attribute / Property	Type	Default	Description
	`'slash' \| 'arrow'`	`'slash'`	Separator between path segments.

Slots

Slot	Description
	Component body or child items.

`<sy-breadcrumb-item>`

Properties

Type	Default	Description
`boolean`	`false`	Indicate the current page and prevent selection.
`boolean`	`false`	Block user interaction and keyboard focus.
`'slash' \| 'arrow'`	`undefined`	Separator between path segments.
`'slash' \| 'arrow'`	`'slash'`	Set by the parent `sy-breadcrumb` to inherit its separator.
`boolean`	`false`	Set by the parent `sy-breadcrumb`. When true, no trailing separator is rendered.

Events

Event	Detail	Description
	`CustomEvent<HTMLSyBreadcrumbItemElement>`	Emitted when the user selects an item.

Methods

Method	Returns	Description
	`Promise<void>`	Render the component again using its current properties. Normally, property changes or the parent component manage updates.

Slots

Slot	Description
	Component body or child items.

Breadcrumb

Usage guide

Start with the top-level path

Indicate the current location

Connect navigation

Examples

Current location

Separator

Inaccessible path

Per-item separator

Events and payloads

Short navigation path

Feature examples

Usage examples · Overview

Property · Item Active

Property · Item Disabled

Property · Item Separator

Property · Separator

Events · Item Selected

Events · Selected

Usage examples · Short navigation path

API reference

<sy-breadcrumb>

Properties

Slots

<sy-breadcrumb-item>

Properties

Events

Methods

Slots

`<sy-breadcrumb>`

`<sy-breadcrumb-item>`