syidaxdesign system
Home Pricing Settings
ComponentsNavigation

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

  1. Start with the top-level path

    Arrange items from the highest-level view to the current view.

  2. Indicate the current location

    Set active on the current item. The last separator is hidden automatically. Mark inaccessible items with disabled.

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

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 / PropertyTypeDefaultDescription
'slash' | 'arrow''slash'Separator between path segments.

Slots

SlotDescription
Component body or child items.

<sy-breadcrumb-item>

Properties

Attribute / PropertyTypeDefaultDescription
booleanfalseIndicate the current page and prevent selection.
booleanfalseBlock user interaction and keyboard focus.
'slash' | 'arrow'undefinedSeparator between path segments.
'slash' | 'arrow''slash'Set by the parent `sy-breadcrumb` to inherit its separator.
booleanfalseSet by the parent `sy-breadcrumb`. When true, no trailing separator is rendered.

Events

EventDetailDescription
CustomEvent<HTMLSyBreadcrumbItemElement>Emitted when the user selects an item.

Methods

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

Slots

SlotDescription
Component body or child items.
Design SystemTab Navigate Enter Open