Componente Breadcrumb (v1)

Il componente core Breadcrumb è un componente di navigazione che crea una breadcrumb di collegamenti in base alla posizione della pagina nella gerarchia del contenuto.

Utilizzo

Il componente Breadcrumb visualizza la posizione della pagina corrente all’interno della gerarchia del sito, consentendo ai visitatori della pagina di spostarsi nella gerarchia delle pagine dalla posizione corrente. Questo componente è spesso integrato nelle intestazioni o nei piè di pagina.

Le opzioni disponibili, ad esempio il livello di navigazione predefinito e la possibilità di visualizzare la pagina corrente o le pagine nascoste, possono essere definite dall’autore del modello nella finestra di dialogo per progettazione. L’editor di contenuto può quindi scegliere se visualizzare o meno le pagine nascoste e il livello di navigazione effettivo del componente nella finestra di dialogo per modifica.

Versione e compatibilità

Questo documento descrive la versione 1 del componente Breadcrumb, originariamente introdotto con la versione 1.0.0 dei Componenti core in AEM 6.3.

La tabella che segue riporta la compatibilità della versione 1 del componente Breadcrumb.

Esempio di output del componente

Di seguito è riportato un esempio tratto da We.Retail.

Schermata

HTML

<div class="cmp cmp-breadcrumb aem-GridColumn aem-GridColumn--default--12">

<ol class="breadcrumb">
    <li class="breadcrumb-item ">
        <a href="/content/we-retail/us.html">
            United States
        </a>
    </li>

    <li class="breadcrumb-item ">
        <a href="/content/we-retail/us/en.html">
            English
        </a>
    </li>

    <li class="breadcrumb-item active">

            Experience

    </li>
</ol>

</div>

JSON

"breadcrumb": {
              "columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
              ":type": "weretail/components/content/breadcrumb"
            }

Finestra di dialogo per modifica

La finestra di dialogo per modifica consente all’autore di contenuto di eliminare le pagine nascoste e attive nelle breadcrumb e l’annidamento nella gerarchia che deve visualizzare.

• Livello di navigazione iniziale: il punto nella gerarchia da cui il componente Breadcrumb deve iniziare scendere fino alla pagina corrente. Ad esempio, in We.Retail:

  • 1 inizia da /content/we-retail
  • 2 inizia da /content/we-retail/<country>

• Mostra nascosti: visualizza le pagine contrassegnate come nascoste nel breadcrumb (per impostazione predefinita non vengono visualizzate)

• Nascondi corrente: consente di eliminare la pagina corrente nella breadcrumb (per impostazione predefinita viene visualizzata)

Finestra di dialogo per progettazione

La finestra di dialogo per progettazione consente all’autore del modello di definire i valori predefiniti per le opzioni di eliminazione delle pagine nascoste e attive nelle breadcrumb e l’annidamento nella gerarchia che deve visualizzare.

• Livello di navigazione iniziale: definisce il valore predefinito per il punto nella gerarchia da cui il componente Breadcrumb deve iniziare a scendere fino alla pagina corrente, quando il componente Breadcrumb viene aggiunto a una pagina.

• Mostra nascosti: definisce il valore predefinito dell’opzione Mostra nascosti quando il componente Breadcrumb viene aggiunto a una pagina.

  • Non abilita o disabilita l’opzione per l’autore. Imposta solo il valore predefinito.

• Nascondi corrente: definisce il valore predefinito dell’opzione Nascondi corrente quando il componente Breadcrumb viene aggiunto a una pagina.

  • Non abilita o disabilita l’opzione per l’autore. Imposta solo il valore predefinito.

Dettagli tecnici

La documentazione tecnica più recente sul componente Breadcrumb è disponibile su GitHub.

L’intero progetto dei Componenti core può essere scaricato da GitHub.

Per ulteriori informazioni sullo sviluppo di Componenti core, vedi la documentazione per gli sviluppatori di Componenti core.

Risorse Business.Adobe.com