# Collegamenti di navigazione superiore personalizzati

**URL:** https://meta.discourse.org/t/custom-top-navigation-links/87225
**Category:** Theme component
**Tags:** official, top-navigation-links
**Created:** [11 Maggio 2018, 2:14am UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225 "2018-05-11T02:14:07Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [11 Maggio 2018, 2:14am UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/1 "2018-05-11T02:14:07Z")

</div>

| | | |
| --- | --- | --- |
| :discourse2: | **Riepilogo** | **Custom Top Navigation Links** ti permette di aggiungere link alla navigazione superiore di Discourse. |
| 👓 | **Anteprima** | [Anteprima su Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/custom-top-navigation-links) |
| 🛠 | **Link al Repository** | [https://github.com/discourse/Discourse-nav-links-component](https://github.com/discourse/Discourse-nav-links-component) |
| 📖 | **Nuovo ai Temi di Discourse?** | [Guida per principianti all’uso dei Temi di Discourse](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

Installa questo componente del tema

> [@](#):
>
> :discourse2: Poiché si tratta di un componente del tema #official mantenuto dal team di Discourse, le richieste di #Support, #Contribute > Bug, #Contribute > UX e #Contribute > Feature possono essere inoltrate nelle rispettive categorie qui su Meta, taggando con l’etichetta appropriata del componente del tema. Clicca su un link qui sotto per iniziare. 👍
> 
> [❓&nbsp; **Supporto**](https://meta.discourse.org/new-topic?category_id=6&tags=top-navigation-links "Chiedi supporto per la configurazione e l'uso di Custom Top Navigation Links") [🐛&nbsp; **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=top-navigation-links "Un report di bug indica che qualcosa non funziona, impedendo l'uso normale/typical del componente del tema") [👀&nbsp; **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=top-navigation-links "Discussione sull'interfaccia utente di Custom Top Navigation Links e su come le funzionalità sono presentate (inclusi linguaggio ed elementi UI)") [💡&nbsp; **Funzionalità**](https://meta.discourse.org/new-topic?category_id=2&tags=top-navigation-links "Discussione su come migliorare o potenziare le funzionalità esistenti di Custom Top Navigation Links e su come potrebbero funzionare le nuove funzionalità proposte")

### Funzionalità

Desktop

 ![desktop example](https://global.discourse-cdn.com/meta/original/4X/2/2/a/22a05484dd3c7c74854c538fc9e9b222ec84bdbd.png)

Mobile

 ![36c3512b5fd56acac5556fe12e3b30992f93bc8d_2_853x750](https://global.discourse-cdn.com/meta/original/4X/9/f/1/9f10ba690e61100c115f02f947e3863e6ec1edc2.jpeg)

### Impostazioni:

| Nome | Descrizione |
| --- | --- |
| Link di navigazione | Delimitati da punto e virgola in questo ordine: **nome visualizzato;descrizione;URL** |
| Nascondi menu a tendina | Nascondi i menu a tendina delle categorie e dei tag |
| Nascondi link predefiniti | Nascondi i link predefiniti sia su mobile che su desktop. |

- Link di navigazione — devono contenere 3 parti:

- Nascondi menu a tendina

- Nascondi link predefiniti

  

> :discourse2: **Ospitato da noi?** I componenti del tema sono disponibili per l’uso nei nostri piani Standard, Business ed Enterprise.

---

<div class="post-metadata">

### Author: ![Cazadividendos](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cazadividendos/32/138705_2.png) [@Cazadividendos](https://meta.discourse.org/u/Cazadividendos)
#### Post date: [6 Marzo 2021, 8:49pm UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/41 "2021-03-06T20:49:41Z")

</div>

Ciao

Uso questo componente del tema. Uno degli elementi del menu punta a una categoria e vorrei mostrare il numero di argomenti non letti per questa categoria.

 ![image](https://global.discourse-cdn.com/meta/original/3X/5/5/55e6c49a67f4a87962876ef453dc3dbd942161c7.png)

Invece di “Agora”, vorrei vedere “Agora (3)” per un utente che ha tre argomenti non letti in questa categoria (stesso comportamento del link standard “Non letti”).

Qualche idea?

Grazie in anticipo.

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [3 Marzo 2022, 1:52am UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/52 "2022-03-03T01:52:27Z")

</div>

> [@Johani](#):
>
> L’URL può anche essere relativa, come  
> `/tags/theme-component`

Qualcuno sa come potrei aggiungere un link a un tag che sia effettivamente relativo al percorso corrente? Vorrei usare un tag _Informazioni_ e offrirlo come link principale a un argomento _Informazioni_ relativo alla categoria in cui si trova un utente.

Ad esempio, l’utente si trova nella categoria `/c/feedback/7`. Scegliendo _Informazioni_ si verrà indirizzati a `/tags/c/feedback/7/about`.

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [10 Maggio 2022, 5:42pm UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/53 "2022-05-10T17:42:07Z")

</div>

Vorrei utilizzare il componente su un’istanza ma vari comportamenti non funzionano:

- Quando si utilizza “nascondi link predefiniti”, nasconde i primi due elementi figli (Ultimi e Categorie). Ma quando si naviga in una categoria, il link predefinito “Categorie” non viene già mostrato nel menu. Quindi questa impostazione nasconde un elemento di navigazione aggiuntivo, altrimenti il terzo in linea.

![Screenshot from 2022-05-10 18-29-05](https://global.discourse-cdn.com/meta/original/4X/b/3/9/b394eb3b4b24c86eff7314687ee0124787a0f37a.png)

- Ho aggiunto una voce di menu per un link di categoria diretto (`/c/game-talk`). Quando ci navigo, non ottiene una classe attiva e non viene evidenziato. Invece, il link “Ultimi” è evidenziato e ha una classe attiva. Questo non è il link predefinito “Ultimi”, ma uno che ho aggiunto tramite il componente (collegandosi solo a `/latest`)

![Screenshot from 2022-05-10 18-25-39](https://cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/4X/c/2/b/c2bd2f8df1bd4f5ac31b4d390a4fa71016815475.png)

- In realtà, il link “Ultimi” non ottiene nemmeno una classe attiva quando non si chiama “Ultimi”. Quindi la classe attiva sul percorso corrente non sembra funzionare affatto a causa del componente. Questa è la visualizzazione su `/latest` ma con un nome diverso per il link Ultimi:

![Screenshot from 2022-05-10 18-39-15](https://cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/4X/d/1/4/d14cae6f0ab3467de8d7ca11c62c256c73246d0b.png)

---

<div class="post-metadata">

### Author: ![sok777](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@sok777](https://meta.discourse.org/u/sok777)
#### Post date: [16 Giugno 2022, 12:31pm UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/55 "2022-06-16T12:31:12Z")

</div>

Domanda veloce-  
Sto cercando di creare questo e fare in modo che l’URL sia ?order=created in modo che gli utenti possano sfogliare gli argomenti recenti.

Questo funziona perfettamente sul desktop, ma fallisce sul cellulare: la barra di navigazione si ricarica e non mostra il menu a discesa.

---

<div class="post-metadata">

### Author: ![WJsirius](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/wjsirius/32/264607_2.png) [@WJsirius](https://meta.discourse.org/u/WJsirius)
#### Post date: [29 Luglio 2022, 2:50am UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/56 "2022-07-29T02:50:26Z")

</div>

Ho la stessa domanda… È una soluzione? 🧐

---

<div class="post-metadata">

### Author: ![WJsirius](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/wjsirius/32/264607_2.png) [@WJsirius](https://meta.discourse.org/u/WJsirius)
#### Post date: [29 Luglio 2022, 7:31am UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/57 "2022-07-29T07:31:16Z")

</div>

Penso di sapere perché è successo…  
il componente ha la riga seguente:

```plaintext
if (window.location.pathname.match(sec2)) {
          $(navHeader).html(filter + markd);
        }

```

A causa dell’espressione regolare… il `?` stesso viene utilizzato come segno speciale dell’espressione regolare, e il parametro dovrebbe essere confrontato con `window.location.search`.  
Ho forzato il componente, l’ho cambiato nel codice seguente e funziona.

```plaintext
if (sec[2].indexOf("?") === -1) {
        if (window.location.pathname.match(sec[2])) {
          $(navHeader).html(filter + markd);
        }
      } else {
        // reg ?->/?
        sec[2] = sec[2].replace(/\?/g, "/?");
        const pathWithSearch = window.location.pathname + window.location.search;
        if (pathWithSearch.match(sec[2])) {
          $(navHeader).html(filter + markd);
        }
      }

```

---

<div class="post-metadata">

### Author: ![sok777](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@sok777](https://meta.discourse.org/u/sok777)
#### Post date: [29 Luglio 2022, 8:32am UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/58 "2022-07-29T08:32:10Z")

</div>

Ottimo, complimenti 👏

Dove hai inserito questo pezzo di codice?

---

<div class="post-metadata">

### Author: ![WJsirius](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/wjsirius/32/264607_2.png) [@WJsirius](https://meta.discourse.org/u/WJsirius)
#### Post date: [29 Luglio 2022, 10:01am UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/59 "2022-07-29T10:01:05Z")

</div>

Discourse-nav-links-component/mobile/head\_tag.html ,sostituisci il codice corrispondente. 🫣

---

<div class="post-metadata">

### Author: ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [30 Luglio 2022, 4:32pm UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/60 "2022-07-30T16:32:16Z")

</div>

> [@WJsirius](#):
>
> Ho forked il componente, l’ho modificato nel codice seguente e funziona.

Perché non fare una PR in modo che tutti possano trarne beneficio?

---

<div class="post-metadata">

### Author: ![WJsirius](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/wjsirius/32/264607_2.png) [@WJsirius](https://meta.discourse.org/u/WJsirius)
#### Post date: [1 Agosto 2022, 10:03am UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/61 "2022-08-01T10:03:43Z")

</div>

Posso farlo? Penso sempre che il mio livello di codice sia troppo scarso… e mi sento un po’ imbarazzato a farlo. Grazie per il consiglio!!! Lo rivedrò e farò una PR!

---

<div class="post-metadata">

### Author: ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [2 Agosto 2022, 2:07pm UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/62 "2022-08-02T14:07:14Z")

</div>

> [@WJsirius](#):
>
> Penso sempre che il mio livello di codice sia troppo scarso

Penso lo stesso dei miei tentativi di contributo!!

Tuttavia, il [@team](https://meta.discourse.org/groups/team) (e i loro strumenti automatizzati) sembrano essere piuttosto bravi a riordinare il codice.

Una volta che l’hai reso un PR, puoi pubblicare il link del PR qui in Meta e visualizzerà un fantastico aggiornamento live incorporato dello stato del PR.

---

<div class="post-metadata">

### Author: ![piffy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/piffy/32/254198_2.png) [@piffy](https://meta.discourse.org/u/piffy)
#### Post date: [12 Settembre 2022, 4:07am UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/64 "2022-09-12T04:07:57Z")

</div>

> [@manuel](#):
>
> Ho aggiunto una voce di menu per un link diretto alla categoria (`/c/game-talk`). Quando ci navigo, non ottiene una classe attiva e non viene evidenziato. Invece, il link “Latest” è evidenziato e ha una classe attiva. Tuttavia, questo non è il link “Latest” predefinito, ma uno che ho aggiunto tramite il componente (che collega solo a `/latest`)

Sei mai riuscito a risolvere questo problema? Sto riscontrando un problema simile

---

<div class="post-metadata">

### Author: ![piffy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/piffy/32/254198_2.png) [@piffy](https://meta.discourse.org/u/piffy)
#### Post date: [12 Settembre 2022, 5:48am UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/65 "2022-09-12T05:48:32Z")

</div>

Non posso dire di aver trovato una soluzione ideale, ma ho capito qual era il problema per me.

Il problema si trova qui  
[https://github.com/discourse/Discourse-nav-links-component/blob/main/desktop/head\_tag.html](https://github.com/discourse/Discourse-nav-links-component/blob/main/desktop/head_tag.html)

Nello specifico, questa parte:

```plaintext
    api.modifyClass("component:navigation-item", {
      pluginId: "discourse-nav-links-component",
      active: Ember.computed("contentFilterMode", "filterMode", function() {
        let contentFilterMode = this.get("content").get("filterMode");

        if (window.location.pathname === location) {
          return contentFilterMode === filter;
        } else {
          return this._super(contentFilterMode, this.get("filterMode"));
        }
      })
    });

```

Sembra che questo imposti lo stato “attivo” su ogni link di navigazione. Francamente, la logica di come decide e cosa siano tutte queste variabili mi è piuttosto oscura. Ma il problema è qui:

```plaintext
        if (window.location.pathname === location) {
          return contentFilterMode === filter;
        } else {
          return this._super(contentFilterMode, this.get("filterMode"));
        }

```

Per me, questo controlla se l’URL della pagina è uguale alla _posizione_ dell’URL della barra di navigazione e, in tal caso, restituisce il risultato di `contentFilterMode === filter`, entrambe le variabili sono un po’ poco chiare per me. Se la condizione fallisce, sembra che esegua semplicemente la logica normale per determinare se qualcosa debba essere contrassegnato come attivo (motivo per cui i miei link non personalizzati sembrano funzionare correttamente). Il problema è che, sebbene questo codice venga eseguito correttamente una volta per ogni link di navigazione, la variabile `location` sembra essere sempre “categories”, quindi l’istruzione `if` è sempre falsa per i link personalizzati. Inoltre, anche se correggo la variabile “location” sostituendola con `this.get("content").href`, anche il valore restituito è sempre falso perché la variabile `filter` è anch’essa sempre impostata su “categories”.

Normalmente farei una PR per risolvere questo problema, ma il problema principale mi sfugge ancora. Ho trovato una soluzione alternativa che funziona per me ma altera leggermente la funzionalità documentata di questo componente, quindi preferirei non fare una PR. Penso che ci saranno casi limite in cui non funzionerà, ad esempio se la tua homepage è impostata su `/latest`

```plaintext
    api.modifyClass("component:navigation-item", {
      pluginId: "discourse-nav-links-component",
      active: Ember.computed("contentFilterMode", "filterMode", function() {
        return window.location.pathname.includes(this.get("content").href);
      })
    });

```

In pratica, controlla solo se l’URL corrente include l’URL della barra di navigazione come sottostringa. Se sì, lo evidenzia.

---

<div class="post-metadata">

### Author: ![Tris20](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tris20/32/264639_2.png) [@Tris20](https://meta.discourse.org/u/Tris20)
#### Post date: [17 Novembre 2022, 9:16pm UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/67 "2022-11-17T21:16:18Z")

</div>

4 post sono stati divisi in un nuovo argomento: [Filtro tag relativo personalizzato sulla barra di navigazione](https://meta.discourse.org/t/custom-relative-tag-filter-on-the-nav-bar/245968)

---

<div class="post-metadata">

### Author: ![mononym](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mononym/32/566879_2.png) [@mononym](https://meta.discourse.org/u/mononym)
#### Post date: [6 Marzo 2023, 11:11am UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/68 "2023-03-06T11:11:42Z")

</div>

Ciao. Sto scorrendo questo post. C’è un modo per indicare gli argomenti non letti per favore? Grazie.

---

<div class="post-metadata">

### Author: ![thaidb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thaidb/32/68488_2.png) [@thaidb](https://meta.discourse.org/u/thaidb)
#### Post date: [9 Marzo 2023, 2:41am UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/69 "2023-03-09T02:41:52Z")

</div>

Ciao,  
Come impostiamo l’apertura di un URL in una nuova scheda?  
Grazie!

---

<div class="post-metadata">

### Author: ![carbonrich](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/carbonrich/32/274219_2.png) [@carbonrich](https://meta.discourse.org/u/carbonrich)
#### Post date: [4 Maggio 2023, 4:28pm UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/70 "2023-05-04T16:28:15Z")

</div>

Questo potrebbe essere un componente davvero utile, ma sembra che alcuni bug di base (ma al di là delle mie capacità di correzione) ne stiano impedendo un uso più ampio. Verranno corretti?

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [4 Maggio 2023, 8:51pm UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/72 "2023-05-04T20:51:26Z")

</div>

Puoi essere più specifico riguardo a quali bug ti impediscono di utilizzare il componente?

---

<div class="post-metadata">

### Author: ![carbonrich](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/carbonrich/32/274219_2.png) [@carbonrich](https://meta.discourse.org/u/carbonrich)
#### Post date: [8 Maggio 2023, 5:31pm UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/73 "2023-05-08T17:31:52Z")

</div>

Sì, scusa, quello principale che ho riscontrato è questo:

> [@manuel](#):
>
> - Quando si utilizza “nascondi link predefiniti”, nasconde i primi due elementi figli (Ultimi e Categorie). Ma quando si naviga in una categoria, il link predefinito “Categorie” non viene mostrato nel menu. Quindi questa impostazione nasconde un elemento di navigazione aggiuntivo, altrimenti il terzo in linea.

Presumo che abbia solo bisogno di un CSS più mirato, ma potrei sbagliarmi!

[Pagina seguente](https://meta.discourse.org/t/custom-top-navigation-links/87225.md?page=2)
