Breadcrumb

Source

• Breadcrumb.css

Example

<nav class="x-breadcrumb text-sm" aria-label="breadcrumb">
    <ol>
        <li>
            <a href="#" class="x-link flex" title="Home">
                <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
                </svg>
            </a>
        </li>
        <li>
            <a href="#" class="x-link" title="">
                User
            </a>
        </li>
        <li>
            <a href="#" class="x-link opacity-50 pointer-events-none" aria-current="location" title="">
                Documents
            </a>
        </li>
    </ol>
</nav>

More examples can be found in the Winduum docs.

Example CSS

@import "winduum/src/components/breadcrumb/props/default.css" layer(theme);
@import "winduum/src/components/breadcrumb/default.css" layer(utilities);

/* Example customization */
@layer theme {
  :root, :host {
    --x-breadcrumb-marker-size: 0.875rem;
    --x-breadcrumb-marker-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>');
  }
}

Winduum CSS Code

winduum/src/components/breadcrumb/props/default.css

:root, :host {
  --x-breadcrumb-marker-size: 0.875rem;
  --x-breadcrumb-marker-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>');
  --x-breadcrumb-gap: calc(var(--spacing) * 1);
}

winduum/src/components/breadcrumb/default.css

.x-breadcrumb {
  > :where(ul, ol) {
    &, > li {
      display: flex;
      align-items: center;
    }

    > li {
      &:not(:last-child)::after {
        mask: var(--x-breadcrumb-marker-mask);
        background-color: var(--x-breadcrumb-marker-background-color, currentColor);
        margin-inline: var(--x-breadcrumb-gap);
        inline-size: var(--x-breadcrumb-marker-size);
        block-size: var(--x-breadcrumb-marker-size);
        flex-shrink: 0;
        content: "";
      }
    }
  }
}