# Able to use the 'extraNavItem' custom html outlet?

**URL:** https://meta.discourse.org/t/able-to-use-the-extranavitem-custom-html-outlet/51928
**Category:** Development
**Created:** [23. Oktober 2016 um 15:38 UTC](https://meta.discourse.org/t/able-to-use-the-extranavitem-custom-html-outlet/51928 "2016-10-23T15:38:49Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![gdpelican](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gdpelican/32/81308_2.png) [@gdpelican](https://meta.discourse.org/u/gdpelican)
#### Post date: [23. Oktober 2016 um 15:38 UTC](https://meta.discourse.org/t/able-to-use-the-extranavitem-custom-html-outlet/51928/1 "2016-10-23T15:38:49Z")

</div>

I’m attempting to add a custom link to the navbar (Ideally something where I’d be able to specify a name and a relative URL for that pill to go to). It’s similar functionality to the ‘bugs’ or ‘features’ links on meta, but I want them to go to a plugin-defined route (`/lattices/:id`), rather than a category-related route.

This doesn’t appear possible with the ‘top menu’ user setting, because it doesn’t accept a custom URL

 ![](https://global.discourse-cdn.com/meta/original/3X/c/8/c8d3384c366c623016d9a8e28ae7d08199feb05f.png)

I had a dig and found the ‘extraNavItem’ custom html field, which seems like it would do what I want:

```plaintext
{{#each navItems as |navItem|}}
  {{navigation-item content=navItem filterMode=filterMode}}
{{/each}}
{{custom-html "extraNavItem"}}

```

But that `{{custom-html}}` tag seems inaccessible, at least from the Admin \> Customize \> CSS/HTML customizations, and even if I were to manually save a model myself, there’s no database column for `extra_nav_item_baked` in `site_customizaation.rb`, which is where I assume that outlet would read from.

Any advice on how to proceed?

EDIT:

Hm, I’m going to have a hack at this: [https://meta.discourse.org/t/best-way-to-customize-top-menu/35336](https://meta.discourse.org/t/best-way-to-customize-top-menu/35336). I’ll report back.

---

<div class="post-metadata">

### Author: ![gdpelican](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gdpelican/32/81308_2.png) [@gdpelican](https://meta.discourse.org/u/gdpelican)
#### Post date: [23. Oktober 2016 um 19:07 UTC](https://meta.discourse.org/t/able-to-use-the-extranavitem-custom-html-outlet/51928/2 "2016-10-23T19:07:53Z")

</div>

I ended up taking another approach here; the linked method wasn’t a fit for me. Fortunately there’s always more than one way! 🗡 🙀

---

<div class="post-metadata">

### Author: ![ebadgley](https://avatars.discourse-cdn.com/v4/letter/e/e19b73/32.png) [@ebadgley](https://meta.discourse.org/u/ebadgley)
#### Post date: [14. Februar 2017 um 19:39 UTC](https://meta.discourse.org/t/able-to-use-the-extranavitem-custom-html-outlet/51928/3 "2017-02-14T19:39:27Z")

</div>

@gdpelican, would you mind sharing your solution? I was looking at the extra-nav-item plugin outlet but have not had much luck yet (very new to Discourse here). My next step is the JS approach you linked to.

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [14. Februar 2017 um 19:52 UTC](https://meta.discourse.org/t/able-to-use-the-extranavitem-custom-html-outlet/51928/4 "2017-02-14T19:52:37Z")

</div>

Putting something into the custom-html outlet is easy using a plugin, though crafting the CSS to get it to look nice might not be so easy. eg.

```plaintext
register_custom_html extraNavItem: "<div class='some_class'>
<a href='/some-link'>Some Link Text</a></div>"

```

---

<div class="post-metadata">

### Author: ![ebadgley](https://avatars.discourse-cdn.com/v4/letter/e/e19b73/32.png) [@ebadgley](https://meta.discourse.org/u/ebadgley)
#### Post date: [14. Februar 2017 um 20:43 UTC](https://meta.discourse.org/t/able-to-use-the-extranavitem-custom-html-outlet/51928/5 "2017-02-14T20:43:28Z")

</div>

Thanks, the example is helpful (I’m not kidding when I said I was very new!)

I see what you are saying about getting this to look nice – the custom\_html is defaulting to inserting a `<div>` when it needs to be a `<li>` for that particular location (nav items). For example, when I do:

`register_custom_html(extraNavItem: "<a href='/faq'>Faq</a>")`

I get:

```
<ul id="ember950" class="ember-view nav nav-pills">
<li id="ember963" title="topics with recent posts" class="ember-view active"><a href="/latest">Latest</a></li>
<li id="ember965" title="topics created in the last few days" class="ember-view"><a href="/new">New (1)</a></li>
<li id="ember967" title="topics you are currently watching or tracking with unread posts" class="ember-view has-icon"><a href="/unread"><span class="unread"></span>Unread</a></li>
<li id="ember969" title="the most active topics in the last year, month, week or day" class="ember-view"><a href="/top">Top</a></li>
<li id="ember971" title="all topics grouped by category" class="ember-view"><a href="/categories">Categories</a></li>
<div id="ember972" class="ember-view"><a href="/faq">Faq</a></div>
<!----></ul>

```

where the last item is the one added via custom\_html. I’ve tried several variations and the `<div>` seems to be a given.

However: the navigation-bar.js does contain an actual declared plugin outlet (see the last line):

```
{{#each navItems as |navItem|}}
  {{navigation-item content=navItem filterMode=filterMode}}
{{/each}}
{{custom-html "extraNavItem"}}
{{plugin-outlet "extra-nav-item" tagName="li"}}

```

I’ve experimented with creating a connector for the `extra-nav-item` outlet as in [Part 2 of the relevant tutorial](https://meta.discourse.org/t/beginners-guide-to-creating-discourse-plugins-part-2-plugin-outlets/31001), but it doesn’t appear to be getting picked up right now. If anyone has good examples of this outlet in use, I’d appreciate them.

(My fallback is the JS method linked above, but I’d prefer to avoid it.)

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [14. Februar 2017 um 21:01 UTC](https://meta.discourse.org/t/able-to-use-the-extranavitem-custom-html-outlet/51928/6 "2017-02-14T21:01:35Z")

</div>

Yes, that tutorial is a bit old. I think for the most part much of it is still applicable, but there have been some recent changes

> [@Important changes to Plugin Outlets for Ember 2.10](https://meta.discourse.org/t/important-changes-to-plugin-outlets-for-ember-2-10/54136):
>
> Shortly I will be merging a branch of Discourse into master that updates us to the latest stable version of Ember, which is 2.10. This is exciting because we’ve been behind Ember’s stable branch for a while and we’ve finally caught up! It also contains the Glimmer 2 template engine which is quite a bit faster so the application should be more responsive, and it also cuts down on our template file sizes so the app should be quicker to download. However, there is a downside, and that I wasn’t abl…
