Volver a Components

Breadcrumb

<sg-breadcrumb> v0.1.1

Componente de navegaci贸n que muestra la ubicaci贸n actual dentro de una jerarqu铆a. Incluye soporte para separadores, iconos y colapso autom谩tico.

Ejemplos

B谩sico

Home Products Electronics Laptops
example.html 
<sg-breadcrumb>
  <sg-breadcrumb-item href="/">Home</sg-breadcrumb-item>
  <sg-breadcrumb-item href="/products">Products</sg-breadcrumb-item>
  <sg-breadcrumb-item href="/products/electronics">Electronics</sg-breadcrumb-item>
  <sg-breadcrumb-item active>Laptops</sg-breadcrumb-item>
</sg-breadcrumb>

Separadores

Chevron (default)

Home Products Item

Slash

Home Products Item

Arrow

Home Products Item

Dot

Home Products Item
example.html 
<sg-breadcrumb separator="chevron">...</sg-breadcrumb>
<sg-breadcrumb separator="slash">...</sg-breadcrumb>
<sg-breadcrumb separator="arrow">...</sg-breadcrumb>
<sg-breadcrumb separator="dot">...</sg-breadcrumb>

Tama帽os

Small

Home Section Page

Medium (default)

Home Section Page

Large

Home Section Page
example.html 
<sg-breadcrumb size="sm">...</sg-breadcrumb>
<sg-breadcrumb size="md">...</sg-breadcrumb>
<sg-breadcrumb size="lg">...</sg-breadcrumb>

Con iconos

Home Settings Profile
example.html 
<sg-breadcrumb>
  <sg-breadcrumb-item href="/" icon="home">Home</sg-breadcrumb-item>
  <sg-breadcrumb-item href="/settings" icon="settings">Settings</sg-breadcrumb-item>
  <sg-breadcrumb-item icon="user" active>Profile</sg-breadcrumb-item>
</sg-breadcrumb>

Item deshabilitado

Home Restricted Current
example.html 
<sg-breadcrumb>
  <sg-breadcrumb-item href="/">Home</sg-breadcrumb-item>
  <sg-breadcrumb-item disabled>Restricted</sg-breadcrumb-item>
  <sg-breadcrumb-item active>Current</sg-breadcrumb-item>
</sg-breadcrumb>

Playground

Edita el c贸digo y ve los cambios en tiempo real:

HTML

API Reference

Propiedades

3
Prop Tipo Default Descripci贸n
separator 'chevron' | 'slash' | 'arrow' | 'dot' 'chevron' Tipo de separador entre items
size 'sm' | 'md' | 'lg' 'md' Tama帽o del breadcrumb
max-items number undefined M谩ximo de items visibles (colapsa el resto)

Slots

1
Slot Descripci贸n
(default) Items del breadcrumb (sg-breadcrumb-item)

C贸mo usar

Componentes relacionados

El breadcrumb usa dos componentes:

sg-breadcrumb-item Props

href string URL del enlace
icon string Nombre del icono (usa sg-icon)
active boolean Indica si es el item actual/activo
disabled boolean Desactiva el item

Uso en frameworks

navigation.tsx 
// React example
const PageHeader = ({ path }) => {
  const segments = path.split('/').filter(Boolean);

  return (
    <sg-breadcrumb separator="chevron">
      <sg-breadcrumb-item href="/" icon="home">
        Home
      </sg-breadcrumb-item>
      {segments.map((segment, i) => (
        <sg-breadcrumb-item
          key={segment}
          href={"/" + segments.class="hl-function">slice(class="hl-number">0, i + class="hl-number">1).class="hl-function">join('/')}
          active={i === segments.length - class="hl-number">1}
        >
          {segment}
        </sg-breadcrumb-item>
      ))}
    </sg-breadcrumb>
  );
};