# Link sidebar buttons and scripts

**URL:** https://meta.discourse.org/t/link-sidebar-buttons-and-scripts/313541
**Category:** Development
**Tags:** sidebar
**Created:** [June 25, 2024, 11:43am UTC](https://meta.discourse.org/t/link-sidebar-buttons-and-scripts/313541 "2024-06-25T11:43:23Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Truest](https://avatars.discourse-cdn.com/v4/letter/t/b5e925/32.png) [@Truest](https://meta.discourse.org/u/Truest)
#### Post date: [June 25, 2024, 11:43am UTC](https://meta.discourse.org/t/link-sidebar-buttons-and-scripts/313541/1 "2024-06-25T11:43:23Z")

</div>

I would like to add it in the form of a button in the sidebar (hamburger menu) → More or at the bottom of the sidebar and then connect JavaScript. How do I access the Discourse sidebar to do that?

I did the following, but it didn’t work.  
I put it in the of the component.

```plaintext
<div class="sidebar-custom-sections">
  <ul class="sidebar-more-section-links-details-content-main">
    <li data-list-item-name="Install" class="sidebar-section-link-wrapper" id="sidebar_install_wrapper">
      <a href="#" rel="noopener noreferrer" target="_self" data-link-name="Install" class="sidebar-section-link sidebar-row" id="sidebar_install_button">
        <span class="sidebar-section-link-prefix icon">
          <svg class="fa d-icon d-icon-download svg-icon prefix-icon svg-string" xmlns="http://www.w3.org/2000/svg">
            <use href="#download"></use>
          </svg>
        </span>
        <span class="sidebar-section-link-content-text">
          Install
        </span>
      </a>
    </li>
  </ul>
</div>

```

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [June 25, 2024, 3:13pm UTC](https://meta.discourse.org/t/link-sidebar-buttons-and-scripts/313541/2 "2024-06-25T15:13:11Z")

</div>

If you mean adding a new link here:

 ![image](https://global.discourse-cdn.com/meta/original/4X/2/0/6/206871161f18b6eec85a7e6f5e52210e57a6edc5.png)

Then, you can use `addCommunitySectionLink` API. You have an example in the comment.

[https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.gjs#L2414-L2471](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.gjs#L2414-L2471)

---

<div class="post-metadata">

### Author: ![Truest](https://avatars.discourse-cdn.com/v4/letter/t/b5e925/32.png) [@Truest](https://meta.discourse.org/u/Truest)
#### Post date: [June 29, 2024, 5:39pm UTC](https://meta.discourse.org/t/link-sidebar-buttons-and-scripts/313541/3 "2024-06-29T17:39:38Z")

</div>

```plaintext
<script>
api.addCommunitySectionLink({
  name: "unread",
  route: "discovery.unread",
  title: I18n.t("some.unread.title"),
  text: I18n.t("some.unread.text"),
  icon: "fa-envelope"
});
</script>

```

I put it in the HTML body section of the component like this, but it does not seem to be added to more. Is not it possible to do it this way?

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [June 29, 2024, 9:09pm UTC](https://meta.discourse.org/t/link-sidebar-buttons-and-scripts/313541/4 "2024-06-29T21:09:11Z")

</div>

You should use the following code in `Head` instead:

```js
<script type="text/discourse-plugin" version="0.8">
    api.addCommunitySectionLink({
      name: "unread",
      route: "discovery.unread",
      title: I18n.t("some.unread.title"),
      text: I18n.t("some.unread.text"),
      icon: "fa-envelope"
    });
</script>

```

`<script type="text/discourse-plugin" version="0.8">` is important if you want to use the API.

That should work better. 👍

---

<div class="post-metadata">

### Author: ![Truest](https://avatars.discourse-cdn.com/v4/letter/t/b5e925/32.png) [@Truest](https://meta.discourse.org/u/Truest)
#### Post date: [June 30, 2024, 7:56am UTC](https://meta.discourse.org/t/link-sidebar-buttons-and-scripts/313541/5 "2024-06-30T07:56:36Z")

</div>

```plaintext
<script type="text/discourse-plugin" version="0.8">
    api.addCommunitySectionLink({
      name: "install",
      route: "/install",
      title: "install",
      text: "install",
      icon: "download"
    });
</script>

```

I tried to add the above code to the sidebar’s view, but it did not work, so I wrote it in the format below, referring to the existing path. However, when the button appears and I press it, the script does not seem to work properly. Oddly enough, the script works when I press the ‘Topic’ button rather than the button I created. The script to be connected was also placed in the head of the HTML.

```plaintext
<script type="text/discourse-plugin" version="0.8">
    api.addCommunitySectionLink({
      name: "install",
      route: "discovery.latest",
      title: "install",
      text: "install",
      icon: "download"
    });
</script>

```