# Custom Top Navigation Links

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

<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: [5월 11, 2023, 7:06오후 UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/74 "2023-05-11T19:06:11Z")

</div>

추가된 세부 정보에 감사드립니다! 실제로 꽤 취약한 CSS였습니다. 이전에 없던 클래스 이름을 여기 사용하게 되어 이제 더 구체적으로 지정할 수 있습니다.

여기서 컴포넌트를 조금 리팩터링했습니다:

> <https://github.com/discourse/Discourse-nav-links-component/pull/13>
>
> Fixed a few lingering issues here (reported in https://meta.discourse.org/t/cust…om-top-navigation-links/87225)... 
> 
> \* active state highlighting stopped working at some point
> \* the pseudo selectors for hiding the default links were fragile and inconsistent
> 
> Also...
> 
> \* Merged mobile/desktop behavior into /common
> \* Cleaned up setting descriptions
> \* Removed JQuery 
> \* Moved from \`head\_tag\` to the initializer

따라서 업데이트만 하면 됩니다.

> [@Johani](#):
>
> 그리고 기본 링크 숨기기는 내비게이션 메뉴에서 기본 최신(Latest) 및 카테고리(Categories) 링크를 숨깁니다.

`hide default links`가 최신 및 카테고리가 아닌 모든 기본 링크를 숨기도록 수정했습니다. 이렇게 하면 숨김 동작을 이해하기 조금 더 쉬울 것 같습니다.

이 컴포넌트를 통해 추가된 내비게이션 항목에는 이제 `nav-item_custom_item-name` 클래스가 적용됩니다. 여기서 `item-name`은 내비게이션 항목의 표시 이름입니다(공백은 하이픈으로 대체됨). 따라서 "my bookmarks"이라는 이름의 내비게이션 항목은 다음과 같은 CSS로 지정할 수 있습니다:

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

```

기본 항목에는 `nav-item_name`과 같은 클래스 이름이 있으므로, 기본 카테고리 링크를 숨기려면 다음과 같이 할 수 있습니다:

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

```

> [@manuel](#):
>
> 직접 카테고리 링크(`/c/game-talk`)를 위한 메뉴 항목을 추가했습니다. 해당 항목으로 이동하면 활성 클래스가 적용되지 않고 하이라이트되지 않습니다. 대신 “Latest” 링크가 하이라이트되고 활성 클래스가 적용됩니다. 하지만 이것은 기본 “Latest” 링크가 아니라 컴포넌트를 통해 추가한 항목입니다(단, `/latest`로만 링크됨)

이제 활성 클래스가 적용되어야 합니다.

---

<div class="post-metadata">

### Author: ![sparkplug](https://avatars.discourse-cdn.com/v4/letter/s/d6d6ee/32.png) [@sparkplug](https://meta.discourse.org/u/sparkplug)
#### Post date: [5월 12, 2023, 6:36오전 UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/75 "2023-05-12T06:36:42Z")

</div>

안녕하세요,

최신 업데이트에서 내비게이션 링크의 표시 텍스트가 소문자로 변경되고,额外的 대시(-)가 추가되는 문제가 발생했습니다.

현재 내비게이션 링크 필드에는 다음과 같은 값이 설정되어 있습니다:

`⮉ Home;show all categories;/forums`

내비게이션 링크는 다음과 같이 표시됩니다:  
 ![image](https://global.discourse-cdn.com/meta/original/4X/2/9/e/29e686aab0b506e17fd938a7629e3e22a1f81fee.png)

이전에는 다음과 같이 표시되었습니다: ⮉ Home

아래의 줄이 문제의 원인으로 보입니다:

> <https://github.com/discourse/Discourse-nav-links-component/blob/b8c4760ca370644c82044211aec79b54cd0e28bd/javascripts/discourse/initializers/init-nav-bar-additions.js#L13>

---

<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: [5월 12, 2023, 2:46오후 UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/76 "2023-05-12T14:46:58Z")

</div>

알려줘서 고마워, 이 문제를 해결하는 작은 업데이트를 방금 적용했어!

---

<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: [5월 13, 2023, 10:28오전 UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/77 "2023-05-13T10:28:21Z")

</div>

솔직히 여기는 꿈속의 영역이라 할 수 있죠—@awesomerobot님, 수정해 주셔서 정말 감사합니다!—이 컴포넌트에 유용하게 추가할 수 있는 기능으로, 카테고리 및 태그 드롭다운 _앞에_ 커스텀 내비를 표시할 수 있는 옵션이 있다면 좋겠는데, 가능할까요(많은 작업 없이)?!

---

<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: [5월 18, 2023, 8:40오후 UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/78 "2023-05-18T20:40:44Z")

</div>

테마에 CSS를 추가하여 이 작업을 수행할 수 있습니다:

```scss
.desktop-view {
  #navigation-bar {
    order: -1;
    margin-right: 0;
  }
  .category-breadcrumb {
    margin-right: auto;
  }
}

```

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [5월 18, 2023, 11:29오후 UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/79 "2023-05-18T23:29:40Z")

</div>

마법처럼 보이네요.

---

<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: [7월 24, 2023, 6:24오전 UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/80 "2023-07-24T06:24:07Z")

</div>

안녕하세요,  
네비게이션에 있는 URL을 새 탭에서 열 수 있도록 설정하는 방법이 있을까요?  
감사합니다!

 ![image](https://global.discourse-cdn.com/meta/original/4X/2/6/c/26c7cba3a00677c01bed2b1377ffe45346859c6a.png)

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [7월 24, 2023, 7:21오전 UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/81 "2023-07-24T07:21:15Z")

</div>

플러그인에서는 이 기능을 사용할 수 없으므로, 이를 위해 사용자 지정 JavaScript를 추가해야 합니다.

---

<div class="post-metadata">

### Author: ![Liseré](https://avatars.discourse-cdn.com/v4/letter/l/ecae2f/32.png) [@Liseré](https://meta.discourse.org/u/Liser%C3%A9)
#### Post date: [10월 3, 2024, 10:19오전 UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/82 "2024-10-03T10:19:49Z")

</div>

안녕하세요,

모바일에서 링크를 표시할 수 있는 방법이 있을까요?

감사합니다!

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [10월 3, 2024, 12:05오후 UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/83 "2024-10-03T12:05:00Z")

</div>

안녕하세요, 모바일에서 드롭다운 대신 전체 링크를 말씀하시는 건가요?  
그렇다면 모바일에서는 링크를 표시할 공간이 많이 부족합니다. 드롭다운은 이를 하나로 압축해 보여줍니다.

---

<div class="post-metadata">

### Author: ![Liseré](https://avatars.discourse-cdn.com/v4/letter/l/ecae2f/32.png) [@Liseré](https://meta.discourse.org/u/Liser%C3%A9)
#### Post date: [10월 3, 2024, 12:25오후 UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/84 "2024-10-03T12:25:07Z")

</div>

안녕하세요,

빠른 답변 주셔서 감사합니다!

설정 기능을 더 많이 테스트해 보았어야 했는데, 모바일과 데스크톱 모두에서 ‘기본 링크 숨기기’ 옵션을 활성화해 두었기 때문에 모바일에서는 해당 링크가 표시되지 않는 것 같습니다.

이 기본 링크들을 숨기면서 모바일에서는 제가 만든 링크만 표시하려면 어떻게 해야 할까요?

---

<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: [6월 13, 2025, 1:28오전 UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/86 "2025-06-13T01:28:32Z")

</div>

이 TC에 대해 버그 보고를 제출했습니다:

> [@첫 번째 사용자 지정 상단 네비게이션 링크가 부적절하게 선택된 상태로 표시됩니다](https://meta.discourse.org/t/the-first-custom-top-nav-link-inappropriately-appears-selected/369093):
>
> 이 Theme Component에는 현재 심각한 문제가 있습니다: 문제 첫 번째 사용자 정의 상단 내비게이션 링크가 선택된 것처럼 보입니다. 이는 일반적으로 목록이 아니기 때문에 말이 되지 않는 상황입니다. 이는 저희 홈페이지 / 최신 목록입니다: 모바일 - 효과가 더 두드러집니다. 이것은 토글이 (부적절하게) 선택된 것처럼 보이는…

이 문제는 기능을 상당히 해칩니다. 만약 이 문제가 해결되지 않을 예정이라면, #broken 태그를 붙이는 것이 어떨까요?

---

<div class="post-metadata">

### Author: ![Johnny\_McIvor](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johnny_mcivor/32/218747_2.png) [@Johnny\_McIvor](https://meta.discourse.org/u/Johnny_McIvor)
#### Post date: [7월 28, 2025, 1:15오전 UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/87 "2025-07-28T01:15:01Z")

</div>

제안: 아이콘을 옵션으로 포함해 주세요. 이모지를 사용했는데 정말 세련된 느낌을 주지만, 모바일에서는 깨지고 당연히 일관성도 없습니다

 ![Screenshot at 2025-07-27 21-14-38](https://global.discourse-cdn.com/meta/original/4X/9/3/b/93b23e0aec4f749fc2892c2c122e3dc063861cf3.png)

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [7월 30, 2025, 11:24오전 UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/88 "2025-07-30T11:24:08Z")

</div>

상단 내비게이션의 링크에 아이콘을 추가할 수 있는 컴포넌트가 있습니다: [Discourse Nav Item Icon / Emoji](https://meta.discourse.org/t/discourse-nav-item-icon-emoji/301105)  
이 컴포넌트로 추가한 사용자 정의 링크에도 적용됩니다. 유일한 차이는 내비게이션 항목 이름 앞에 `custom_`를 추가해야 한다는 점입니다.

예를 들어,  
해당 컴포넌트를 사용하여 “Preferences” 링크를 추가했습니다: `Preferences;edit your preferences;/my/preferences`

 !["nav links" 설정 구성: "Preferences;edit your preferences;/my/preferences"](https://global.discourse-cdn.com/meta/original/4X/8/b/4/8b40d468660da2bb0c634884e151683ae32d527d.png)

그리고 아이콘/이모지 컴포넌트를 설정하여 렌치 아이콘을 추가했습니다: `icon:custom_preferences:solid:wrench:currentColor`

 !["Nav item prefix" 설정 구성: "icon:custom_preferences:solid:wrench:currentColor"](https://global.discourse-cdn.com/meta/original/4X/9/0/6/906768f71db8ee6d13543c41e0a8d91f7dacf450.png)

결과:  
 ![image](https://global.discourse-cdn.com/meta/original/4X/4/8/4/4848a653c2b2caebc1a3e6606aa71f847b6a56c8.png)

---

<div class="post-metadata">

### Author: ![Cate\_Soule](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cate_soule/32/492770_2.png) [@Cate\_Soule](https://meta.discourse.org/u/Cate_Soule)
#### Post date: [12월 14, 2025, 4:51오전 UTC](https://meta.discourse.org/t/custom-top-navigation-links/87225/89 "2025-12-14T04:51:15Z")

</div>

안녕하세요, 이 부분을 업데이트해 주세요. 현재 상태에서는 기본 링크(최신, 모든 카테고리)의 URL이 깨집니다.

[이전 페이지](https://meta.discourse.org/t/custom-top-navigation-links/87225.md?page=1)