# Add button to top navigation bar

**URL:** https://meta.discourse.org/t/add-button-to-top-navigation-bar/49552
**Category:** Development
**Created:** [September 1, 2016, 11:59am UTC](https://meta.discourse.org/t/add-button-to-top-navigation-bar/49552 "2016-09-01T11:59:44Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![kgish](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kgish/32/121131_2.png) [@kgish](https://meta.discourse.org/u/kgish)
#### Post date: [September 1, 2016, 11:59am UTC](https://meta.discourse.org/t/add-button-to-top-navigation-bar/49552/1 "2016-09-01T11:59:44Z")

</div>

I’m developing a plugin which needs to be able to append an extra button to the top navigation bar:

```plaintext
list-controls > .container > div > .ul.nav

```

I also need to remove the new-topic button at the far right.

What is the proper way to do this? Plugin.rb? Javascript?

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [September 1, 2016, 12:25pm UTC](https://meta.discourse.org/t/add-button-to-top-navigation-bar/49552/2 "2016-09-01T12:25:49Z")

</div>

You could hide the New Topic button via CSS and to add navigation you can do that in the Customize JavaScript sections. See the below post as an example (there are others in that topic too)

> [@Reply reminder - Remind users to reply to new users topics with zero replies](https://meta.discourse.org/t/reply-reminder-remind-users-to-reply-to-new-users-topics-with-zero-replies/42644/2):
>
> Why not just add a navigation page that lists all topics with zero replies? The query exists… adding it to the navigation is trivial… Why does it have to nag me? Adding this to the \</body\> in your Customize, creates an Unanswered navigation tab \<script\> Discourse.ExternalNavItem = Discourse.NavItem.extend({ href : function() { return this.get('href'); }.property('href') }); I18n.translations.en.js.filters.unanswered = { title: "Unanswered", help: "Topics that have not be …

---

<div class="post-metadata">

### Author: ![kgish](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kgish/32/121131_2.png) [@kgish](https://meta.discourse.org/u/kgish)
#### Post date: [September 1, 2016, 9:07pm UTC](https://meta.discourse.org/t/add-button-to-top-navigation-bar/49552/3 "2016-09-01T21:07:20Z")

</div>

CSS will not work, so I resorted to the following solution which I happed to find elsewhere on the forum:

```plaintext

Discourse.ExternalNavItem = Discourse.NavItem.extend({
    href : function() {
        return this.get('href');
    }.property('href')
});

// Add navigation button 'Mijn berichten'

Discourse.NavItem.reopenClass({
    buildList : function(category, args) {
        console.log(`NavItem#buildList(), category="${category?category.get('name'):'null'}", args="${JSON.stringify(args)}"`);
        var list = this._super(category, args);
        if (!category && args.filterMode !== 'posted') {
            console.log('NavItem#buildList() => add posted button ');
            list.push(Discourse.ExternalNavItem.create({href: '/posted', name: 'posted'}));
        }
        return list;
    }
});

```

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [September 1, 2016, 9:11pm UTC](https://meta.discourse.org/t/add-button-to-top-navigation-bar/49552/4 "2016-09-01T21:11:04Z")

</div>

> [@kgish](#):
>
> CSS will not work

It should for hiding the New Topic button, but for adding links, you are correct, it won’t which is why I linked to that topic (to show you how to add buttons)