# Migas de pan

> `src › main.rs › fn main`, pulsables si quieres. Un componente nativo de Pyzed para GUIs de escritorio en Python, con vista previa, ejemplos y su API.

Source: https://albakore.github.io/pyzed/es/library/breadcrumbs/

:::tip[En pocas palabras]
Muestra dónde estás, paso a paso: Carpeta › Subcarpeta › Archivo.
:::

La ruta hasta la ubicación actual. Las partes son cadenas o tuplas `(icono, texto)`; `on_press` recibe el índice de la parte pulsada.

`ui.breadcrumbs` · Categoría: [Navegación](https://albakore.github.io/pyzed/es/library/#navegación) · [Referencia completa →](https://albakore.github.io/pyzed/es/reference/ui/#breadcrumbs)

**Código:**

```python
pz.column([
    ui.breadcrumbs(["src", "ui", "button.rs"]),
    ui.breadcrumbs([("folder", "src"), ("file-code", "main.rs"), "fn main"], on_press=on_press),
    ui.breadcrumbs(["Settings", "Editor", "Font"], separator="/"),
], spacing=14)
```

## Cuándo usarlo

- Encima de un editor o una vista anidada, para mostrar dónde estás y saltar a un nivel superior.

## Uso

```python
import pyzed as pz
from pyzed import ui

pz.column([
    ui.breadcrumbs(["src", "ui", "button.rs"]),
    ui.breadcrumbs([("folder", "src"), ("file-code", "main.rs"), "fn main"], on_press=on_press),
    ui.breadcrumbs(["Settings", "Editor", "Font"], separator="/"),
], spacing=14)
```

## Variantes

:::note[Sobre estas capturas]
Cada captura la graba pyzed mismo, fuera de pantalla a 2x, en One Dark o One Light según el tema de este sitio, y recortada al componente para que se vea a su tamaño real. El puntero pasa por encima, pulsa o escribe en él; un componente que no reacciona al puntero recorre algunos temas. Con movimiento reducido ves el primer fotograma. Abre **Código** bajo una captura para ver el fragmento que la dibuja; los nombres libres como `on_save` son tus propios callbacks.
:::

### Opciones

```python
ui.breadcrumbs(["src", "ui", "button.rs"])
```

```python
ui.breadcrumbs([("folder", "src"), ("file-code", "main.rs"), "fn main"])
```

```python
ui.breadcrumbs(["Settings", "Editor", "Font"], separator="/")
```

```python
ui.breadcrumbs(["Home", "Projects", "pyzed"], on_press=on_press)
```

### Estados y eventos

```python
ui.breadcrumbs(["pyzed", "python", "pyzed", "ui", "lists.py"], max_items=3, on_press=on_press, on_more=on_more)
```

## Eventos

Migas de pan tiene **2 eventos propios**, en la tabla de abajo. Como todo widget, también tiene los **18 eventos comunes** (`click`, `double_click`, `right_click`, `mouse_enter`, `drag`, `key_down`, `resize`…), que se conectan con `.on(...)`: mira [Eventos](https://albakore.github.io/pyzed/es/guides/events/) y [Eventos de cada componente](https://albakore.github.io/pyzed/es/library/events/).

| Evento | El handler recibe | Cuándo |
| --- | --- | --- |
| `on_press` | `(index)` | Se llama con el índice de la parte pulsada. |
| `on_more` | `()` | Hace pulsable el `…`. |

**El handler recibe** es lo que Pyzed le pasa a tu función: `()` es nada. Cualquier handler también puede ser un mensaje (un valor que no se puede llamar), que va a `update()`.

### Manejar los eventos

Los mismos eventos escritos de tres formas. **Imperativa**: métodos de la app que cambian `self`. **Declarativa**: los handlers producen mensajes y un único `update()` decide. **Funcional**: una función pura dibuja un estado inmutable y pide cambios con `set_state(...)`. Mira [Imperativo, declarativo y funcional](https://albakore.github.io/pyzed/es/guides/code-styles/).

**Imperativo:**

```python
class Browser(pz.App):
    def __init__(self):
        self.path = ["home", "ada", "projects", "pyzed"]

    def go(self, index):                 # on_press: the index of the clicked part
        self.path = self.path[:index + 1]

    def view(self):
        return ui.breadcrumbs(self.path, on_press=self.go, max_items=3,
                              on_more=lambda: self.go(0))   # the … of the hidden parts
```

**Declarativo:**

```python
from dataclasses import dataclass

@dataclass
class GoTo:
    index: int

class Browser(pz.App):
    path = ["home", "ada", "projects", "pyzed"]

    def update(self, message):
        match message:
            case GoTo(index):
                self.path = self.path[:index + 1]

    def view(self):
        return ui.breadcrumbs(self.path, on_press=GoTo)
```

**Funcional:**

```python
from dataclasses import dataclass

@dataclass(frozen=True)
class State:
    path: tuple = ("home", "ada", "projects", "pyzed")

def view(state, set_state):
    return ui.breadcrumbs(list(state.path), on_press=lambda i: set_state(path=state.path[:i + 1]))
```

## Propiedades y API

### `ui.breadcrumbs`

```python
breadcrumbs(
    parts,
    *,
    separator='›',
    on_press=None,
    max_items=None,
    on_more=None,
    theme=None,
)
```

`src › main.rs › fn main`. Las partes pueden ser textos o tuplas `(icono, texto)`.

| Propiedad | Por defecto | Descripción |
| --- | --- | --- |
| `parts` | *obligatorio* | Las partes. |
| `separator` | `"›"` | Separador. |
| `max_items` | `None` | Conserva la primera parte y las últimas y muestra `…` en lugar del resto. |
| `theme` | `None` | Tema a usar en lugar del actual (`pyzed.theme.current()`). |

Eventos: `on_press`, `on_more` ([eventos](#eventos)).

[Referencia completa →](https://albakore.github.io/pyzed/es/reference/ui/#breadcrumbs)

## Relacionados

- [Barra de herramientas](https://albakore.github.io/pyzed/es/library/toolbar/): La barra bajo las pestañas: migas de pan y acciones.
- [Barra de pestañas](https://albakore.github.io/pyzed/es/library/tab-bar/): Pestañas de editor con iconos, puntos de cambios y botón de cerrar.