Links de Navegação Personalizados no Topo

Componente de tema
,
74

Obrigado pelos detalhes adicionais! Era realmente um CSS frágil. Temos nomes de classes aqui onde antes não havia nenhum, então podemos ser mais específicos agora.

Refatorei o componente um pouco aqui:

Portanto, tudo o que ele precisará é de uma atualização.

Atualizei isso para que hide default links oculte todos os links padrão, não apenas latest e categories. Acho que isso tornará o comportamento de ocultar um pouco mais fácil de entender.

Os itens de navegação adicionados por este componente agora receberão uma classe nav-item_custom_item-name, onde item-name é o nome de exibição do item de navegação (espaços substituídos por hifens). Portanto, um item de navegação chamado “my bookmarks” pode ser direcionado com CSS como este:

#navigation-bar {
   li.nav-item_custom_my-bookmarks {
     background: skyblue;
   }
}

Os itens padrão têm um nome de classe como nav-item_name, então se você quiser ocultar o link padrão de categorias, você pode fazer:

#navigation-bar {
   li.nav-item_categories {
     display: none;
   }
}

Isso agora deve receber a classe ativa.

3 curtidas
75

Olá,

A última atualização altera o texto de exibição do link de navegação para minúsculas e adiciona hifens extras.

Temos o seguinte no campo do link de navegação:

⮉ Home;show all categories;/forums

O link de navegação aparece da seguinte forma:
image

Anteriormente, era exibido como: ⮉ Home

Esta linha parece ser a culpada:

2 curtidas
76

obrigado por mencionar, acabei de fazer uma pequena atualização que corrige isso!

3 curtidas
77

Dado que estamos no território dos sonhos mais loucos aqui — muito obrigado por essas correções @awesomerobot! —, uma adição útil a este componente seria uma opção para fazer a navegação personalizada aparecer antes dos menus suspensos de categoria e tag, isso é possível (sem muito trabalho)?!

1 curtida
78

Você pode fazer isso com um pouco de CSS adicionado a um tema:

.desktop-view {
  #navigation-bar {
    order: -1;
    margin-right: 0;
  }
  .category-breadcrumb {
    margin-right: auto;
  }
}
3 curtidas
79

Isso parece mágica.

80

Olá,
Como posso configurar um URL na navegação para que ele possa ser aberto em uma nova aba?
Obrigado!

image
image1444×302 25.2 KB

81

Isso não é possível pelo plugin, você precisará adicionar JavaScript personalizado para isso.

1 curtida
82

Olá pessoal,

Existe uma forma de exibir o link no celular, por favor?

Obrigado!

83

Olá, você está se referindo aos links completos em vez do menu suspenso no celular?
Se sim, não há muito espaço no celular para ter os links. O menu suspenso o compacta em um só.

84

Olá,

Obrigado pela sua rápida resposta!

Desculpe, eu deveria ter mexido mais nas configurações, não aparece no celular porque marquei Ocultar os links padrão em celular e desktop.

Como posso ocultar esses links padrão e ainda exibir meus links no celular, por favor?

86

Abri um relatório de bug para este TC:

Isso realmente prejudica a funcionalidade; se não for abordado, talvez deva ser marcado como broken?

4 curtidas
87

Sugestão: inclua ícones como uma opção. Usei emojis e ficou muito estiloso, mas quebra no celular e obviamente não é consistente

Screenshot at 2025-07-27 21-14-38
Screenshot at 2025-07-27 21-14-381056×141 14.2 KB

88

Existe um componente que permite adicionar ícones aos links na navegação superior: Discourse Nav Item Icon / Emoji
e ele também funciona com links personalizados adicionados por este componente. A única diferença é que você precisa adicionar custom_ na frente do nome do item de navegação.

Por exemplo,
Adicionei um link “Preferências” com a ajuda deste componente: Preferences;edit your preferences;/my/preferences

Configuration of nav links setting: Preferences;edit your preferences;/my/preferences
Configuration of nav links setting: Preferences;edit your preferences;/my/preferences910×255 8.94 KB

E então configurei o componente de ícone/emoji para adicionar o ícone de chave inglesa: icon:custom_preferences:solid:wrench:currentColor

Configuration of the Nav item prefix setting: icon:custom_preferences:solid:wrench:currentColor
Configuration of the Nav item prefix setting: icon:custom_preferences:solid:wrench:currentColor912×306 8.92 KB

Resultado:
image

1 curtida