# Custom Hamburger Menu Links

**URL:** <https://meta.discourse.org/t/custom-hamburger-menu-links/87644>\
**Category:** Theme component\
**Tags:** deprecated\
**Created:** [May 16, 2018, 2:15pm UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644 "2018-05-16T14:15:15Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [October 18, 2022, 5:48am UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/65 "2022-10-18T05:48:33Z")

</div>

I noticed this too and it seems to only the external links not appears under **More**.

---

<div class="post-metadata">

**Author:** ![MarcP](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/marcp/32/160184_2.png) [@MarcP](https://meta.discourse.org/u/MarcP)\
**Post date:** [October 22, 2022, 2:10pm UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/66 "2022-10-22T14:10:27Z")

</div>

I use internal links in this component, for example, I have a link that opens user invites: /my/invited/pending/

When opening the link from the sidebar I get: Oops! That page doesn’t exist or is private.

The link works when accessed from the URL bar.

When entering the full URL ([https://domain.com/my/invited/pending/](https://domain.com/my/invited/pending/)) the URL opens like this:  
[https://domain.com/https://domain.com/my/invited/pending/](https://domain.com/https://domain.com/my/invited/pending/)

---

<div class="post-metadata">

**Author:** ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)\
**Post date:** [October 22, 2022, 2:32pm UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/67 "2022-10-22T14:32:43Z")

</div>

Yep. Known issue.

> [@2.9.0beta 10 and chat link is broken](https://meta.discourse.org/t/2-9-0beta-10-and-chat-link-is-broken/240437):
>
> In the new sidebar under community/more is link to adminpage of chat. There is minor typo’ish bug. I’ll get error 404 because of this: https://foorumi.katiska.eu/https://foorumi.katiska.eu/chat/browse/open

---

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [October 22, 2022, 3:16pm UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/68 "2022-10-22T15:16:50Z")

</div>

Hello,  
This is should work with: `Chat,/chat/browse/open` 🙂

---

<div class="post-metadata">

**Author:** ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)\
**Post date:** [October 22, 2022, 3:20pm UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/69 "2022-10-22T15:20:45Z")

</div>

Yeah, I know. I sended my comment perhaps a little bit too fast. Well, defenetly too fast, because I should say there must use path instead full url.

Extra link for the chat… well, new sidebar changed the playground totally and it is not needed anymore.

---

<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:** [November 8, 2022, 12:53am UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/70 "2022-11-08T00:53:56Z")

</div>

I took a look at Discourse’s sidebar code and @manuel [icons addition](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/59).

It seems that currently, it’s not possible to customize the icon’s custom links because the hamburger menu decoration method doesn’t take into account the `prefixValue` constant (which contains the icon’s name) or something like that…

It also seems to me that hamburger-menu decorations with `api.decorateWidget` are going to be depreciated. See:  
[https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L534](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L534)

Also, the fact that external links don’t work anymore could come from this:  
[https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L524](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L524)

So that there should be some changes in core to make this available.

⚠ My knowledge of how Discourse works is almost non-existent so I could be very wrong.

Am I right about my findings?

---

<div class="post-metadata">

**Author:** ![asirota](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/asirota/32/197298_2.png) [@asirota](https://meta.discourse.org/u/asirota)\
**Post date:** [January 6, 2023, 9:58pm UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/71 "2023-01-06T21:58:20Z")

</div>

I’ve installed this theme component from github repo. running 3.0.0.beta15 on my discourse and even though I appear to have added it, the hamburger menu doesn’t show my link… Any ideas?

 ![image](https://global.discourse-cdn.com/meta/original/4X/b/5/0/b5034ffd72e0a04ba3334ab506f60db704dba5e8.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:** [January 7, 2023, 1:30pm UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/72 "2023-01-07T13:30:06Z")

</div>

It may be related to:

> [@Custom Hamburger Menu Links](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/65):
>
> I noticed this too and it seems to only the external links not appears under More.

To this day, external links still don’t work.  
And internal links must begin with a relative path, not a full path.

---

<div class="post-metadata">

**Author:** ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)\
**Post date:** [January 13, 2023, 2:42pm UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/73 "2023-01-13T14:42:38Z")

</div>

Thanks a lot for this useful component. I need to add a few important internal links, but now that the hamburger menu is integrated into the sidebar I find that they’re not very visible under the **More** menu. Users are usually terrible at finding things, so I really need to put them in the top level, ideally right after **My posts**. Are there any CSS hacks to accomplish this?

---

<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:** [January 13, 2023, 10:37pm UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/74 "2023-01-13T22:37:45Z")

</div>

> [@rahim123](#):
>
> Are there any CSS hacks to accomplish this?

Beyond what CSS can achieve I think. The discourse team do have this on their roadmap, but it isn’t happening quickly (I think):

> [@Ability to add a custom section of links to the sidebar](https://meta.discourse.org/t/ability-to-add-a-custom-section-of-links-to-the-sidebar/239778):
>
> We want to allow users to add a custom section of links to their sidebar. In a first pass for this feature, we plan to build upon the existing [sidebar preferences page](https://meta.discourse.org/my/preferences/sidebar), and allow a user to add a single custom section for these links. We think it can work something like this: checkbox for “Show Custom Section”. If checked Custom Section appears above Categories Section and values must have valid Name and at least one valid Link to “Save Changes” textbox for Name of the custom section (defaul…

---

<div class="post-metadata">

**Author:** ![hosch](https://avatars.discourse-cdn.com/v4/letter/h/22d042/32.png) [@hosch](https://meta.discourse.org/u/hosch)\
**Post date:** [January 25, 2023, 3:39pm UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/77 "2023-01-25T15:39:30Z")

</div>

> [@rahim123](#):
>
> Are there any CSS hacks to accomplish this?

I use:

```js
<script>
  const customHeader = document.createElement("div")
  customHeader.className = "sidebar-section-wrapper sidebar-section-community"
  customHeader.innerHTML = `
            <div class="sidebar-section-header-wrapper sidebar-row">
              <button id="ember11" class="sidebar-section-header sidebar-section-header-collapsable btn-flat btn no-text" type="button">
                <span class="sidebar-section-header-text"> Rechtliches </span>
              </button>
          </div>
          <div class="sidebar-section-content" id="customNavigation"/>
      `

  $(document).ready(function () {
    // Create the links
    const links = [
      { title: "Impressum", src: "/impressum" },
      { title: "Datenschutz", src: "/privacy" },
    ]

    // Mobile
    let hamburger = document.getElementById("toggle-hamburger-menu")
    if (hamburger) {
      hamburger.addEventListener("click", addCustomLinks)
    } else {
      addCustomLinks()
    }
    
    let bool = false;
    function addCustomLinks() {
      setTimeout(function () {
        // Force to wait until navigation has been loaded
        const sidebar = document.getElementsByClassName("sidebar-sections")[0]
        if (sidebar) {
          sidebar.append(customHeader)
          if (bool) return;
          // Get the customNav Id
          const customNavigation = document.getElementById("customNavigation")
          if (customNavigation) {
            links.filter(function (link) {
              let linkDiv = document.createElement("div")
              linkDiv.className = "sidebar-section-link-wrapper"
              linkDiv.innerHTML = `<a href="${link.src}" class="sidebar-section-link sidebar-section-link-everything sidebar-row ember-view">
                        <span class="sidebar-section-link-prefix icon"></span>
                        <span class="sidebar-section-link-content-text"> ${link.title} </span>
                    </a>
                  `
              customNavigation.append(linkDiv)
              let linkIcon = document.getElementById("link_" + link.title)
            })
          }
        }
        bool = true
      }, 0)
      
    }
  })
</script>

```

You can see the result at [https://forum.courservio.de/](https://forum.courservio.de/)  
The _original_ version of this code is from [https://meta.discourse.org/t/add-custom-links-to-sidebar/246848](https://meta.discourse.org/t/add-custom-links-to-sidebar/246848). Maybe it could help you.

---

<div class="post-metadata">

**Author:** ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)\
**Post date:** [January 25, 2023, 5:13pm UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/78 "2023-01-25T17:13:42Z")

</div>

@hosch Wow, very nice, exactly what I was looking for! Thanks very much.

---

<div class="post-metadata">

**Author:** ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)\
**Post date:** [January 28, 2023, 2:54pm UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/79 "2023-01-28T14:54:26Z")

</div>

@hosch By any chance is it possible to move it higher up? I’d like it to appear after the **Community** section, or possibly even before it.

* * *

_ **Edit:** _ _Looks like it’s possible with a variation on this:_  
_[Rearrange Existing Hamburger Menu Items - #3 by awesomerobot](https://meta.discourse.org/t/rearrange-existing-hamburger-menu-items/123098/3)_

```plaintext
.sidebar-sections {
  display: flex; /* Setup a flex layout so you can reorder things */
  flex-direction: column;
  .sidebar-section-community {
    order: -1;
  }
}

```

I wonder about moving it to the highest position?

---

<div class="post-metadata">

**Author:** ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)\
**Post date:** [January 28, 2023, 5:06pm UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/80 "2023-01-28T17:06:55Z")

</div>

There is a quirk with this method where the custom `div` disappears when toggling the visibility of the sidebar, for example if the browser window is narrow. This is a problem especially for tablets, which usually get the desktop version of Discourse and require clicking on the hamburger menu to display the sidebar. Any possible workarounds? Thanks!

* * *

_ **Edit:** _ Solved here:

> [@Ability to add a custom section of links to the sidebar](https://meta.discourse.org/t/ability-to-add-a-custom-section-of-links-to-the-sidebar/239778/15):
>
> @Ryan_Hyer Very nice! You figured out the way to make the items appear (or continue appearing) after the hamburger toggle event, which was the problem I was running into here: Your code is very orderly and clean too. Thanks to that I was able to hack it into displaying what I want in the Community menu without being hidden under More: Head: \<script\> const links = [ // FontAwesome icons may need to be added in the site settings if they don't correctly appear { title: "User Directory"…

---

<div class="post-metadata">

**Author:** ![bquast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bquast/32/289307_2.png) [@bquast](https://meta.discourse.org/u/bquast)\
**Post date:** [February 26, 2023, 6:03pm UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/82 "2023-02-26T18:03:05Z")

</div>

Thanks @hosch and @Olivier_Lambert for making this.

Could you please explain to this newbie where I should insert this? 🙏

---

<div class="post-metadata">

**Author:** ![bquast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bquast/32/289307_2.png) [@bquast](https://meta.discourse.org/u/bquast)\
**Post date:** [February 26, 2023, 6:05pm UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/83 "2023-02-26T18:05:20Z")

</div>

How can I reorder elements in a sidebar / hamburger-menu section?

E.g. I want to put “All categories” above the categories in the “Categories” section, same with “All tags”.

Thank you!

---

<div class="post-metadata">

**Author:** ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)\
**Post date:** [February 26, 2023, 6:09pm UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/84 "2023-02-26T18:09:08Z")

</div>

> [@bquast](#):
>
> where I should insert this?

You know now how to use a component for CSS, right? Add that on head-section.

> [@bquast](#):
>
> How can I reorder elements

You can’t easily. Yet anyway. It is no totally finished and polished at the moment.

---

<div class="post-metadata">

**Author:** ![bquast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bquast/32/289307_2.png) [@bquast](https://meta.discourse.org/u/bquast)\
**Post date:** [February 26, 2023, 7:20pm UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/85 "2023-02-26T19:20:48Z")

</div>

> [@Jagster](#):
>
> Add that on head-section

I tried this, it gave me an error on using a semicolon near `src`.

Let try again. Tnx

---

<div class="post-metadata">

**Author:** ![MarcP](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/marcp/32/160184_2.png) [@MarcP](https://meta.discourse.org/u/MarcP)\
**Post date:** [March 1, 2023, 12:47am UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/86 "2023-03-01T00:47:24Z")

</div>

> [@MarcP](#):
>
> I use internal links in this component, for example, I have a link that opens user invites: /my/invited/pending/
> 
> When opening the link from the sidebar I get: Oops! That page doesn’t exist or is private.

This is still a thing, the solutions after did not fix the issue.

Setting: `Invite friends,/my/invited/pending/,f`

Off-topic:

> [@asirota](#):
>
> ![image](https://global.discourse-cdn.com/meta/original/4X/b/5/0/b5034ffd72e0a04ba3334ab506f60db704dba5e8.png)
> 
> image1920×1032 126 KB

I saw this condensed sidebar styling before, I can’t seem to find it anywhere. Is this a theme component?

---

<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:** [March 7, 2023, 12:58pm UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/87 "2023-03-07T12:58:55Z")

</div>

> [@bquast](#):
>
> I want to put “All categories” above the categories in the “Categories” section, same with “All tags”.

You can use this CSS:

```css
#sidebar-section-content-categories,
#sidebar-section-content-tags {
    display: flex;
    flex-direction: column;
    li:last-child {
        order: -1;
    }
}

```

🙂

 ![image](https://global.discourse-cdn.com/meta/original/4X/4/d/d/4dd69e74681f752620a779cfe49b9082f492b6dc.png)

[Previous page](https://meta.discourse.org/t/custom-hamburger-menu-links/87644.md?page=1)

[Next page](https://meta.discourse.org/t/custom-hamburger-menu-links/87644.md?page=3)