Able to use the 'extraNavItem' custom html outlet?

Dev
1

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

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

{{#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. I’ll report back.

1 Like
2

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

2 Likes
3

@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.

4

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.

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

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, 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.)

6

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

2 Likes