Custom hamburger menu links


(Joe) #1

This is a theme component that will allow you to easily add links the hamburger menu.

Repository link






You add links via comma delimited values in this order:


is the name of the link that shows on the menu.

is the path you want the link to have. You can use relative paths like


if you prefer.

can have one of two values. Either the letter g or the letter f

Use “g” if you want the link to appear in the generalLinks section:

or use “f” if you want the link to appear in the footerLinks section:

How do I install this theme?

follow the official theme installation guide here:

Then add the component to your theme as a theme component and you’re all set!

Login Required activated - after successfull login it transfers you to nonexisting page
Mobile formatting just broke
Globally pinned/banner topics management
How to add custom dropdown menu to Discourse header?
User-defined theme switcher disappears on admin pages
Heading for group of categories
ProCourse Static Pages
How can i add custom hamburger menu
Navigation - Add custom menu items
(Steven) #2

Thats a nice addition, thanks for that. It’s already installed :smiley:

Could you add a target option so that it is possible to open the link in a new tab/window (if no target is given just use “_self”)


(David Kingham) #3

Any idea why this wouldn’t show up in my list of theme components?

I tried rebuilding the app twice and haven’t any problems with other plugins

    - exec:
        cd: $home/plugins
          - git clone
          - git clone
          - git clone
          - git clone
          - git clone

(Joe) #4

I believe you followed the plugin installation instructions to install the theme. It won’t work that way.

You should install it as a theme. It would then show up in your list of themes.

(David Kingham) #5

Now I feel stupid, I was in plugin installation mode. Thank you sir!

(Sami Syed) #6

Is it possible to separate custom added menu links with the grey line?

Category for Threads with zero replies?
(Helmi) #7

Any idea why the forum doesn’t render at all as soon as I add this component to my theme?

Using the default theme without a lot modification and your navigation links component (which works fine).

(Joe) #8

Possibly, yes @Sami_Syed but it’s beyond the scope of this theme.

Not sure @helmi, I just checked and everything seems ok

Are you seeing any errors in the browser console?

(Helmi) #9

Yeah, “ReferenceError: loc is not defined”

Problem is that I can’t even disable it now as the admin area is affected, too.

(Joe) #10

You can use safe-mode to disable your current theme.

go to

More on that here

(Helmi) #11

Thanks, that helped me out. I still can’t figure out what’s wrong. It doesn’t even matter if I put links in the settings or not - tried external and internal links. Weird.

Also tried removing all other components (Nav Links component only) but that didn’t change anything. As soon as I add this component rendering breaks.

(Joe) #12

I just pushed a small fix. Please update the theme and then try again and let me know what happens.

(Helmi) #13

Thanks, that fixed it. Additionally I found out that I had used semi colons as separator instead of commas :crazy_face:


Yes, I did the same thing - but that’s in the help text below, not sure why … can these be updated to commas?:

Comma delimited in this order: Text;URL;Location. Text is what appears on the menu. URL is the path for the link. Location is where you want the link to appear. There are two options "g" for generalLinks and "f" for footerLinks.

(Joe) #15

My bad :man_facepalming: those should be commas indeed. This is fixed.


Thanks Joe.

As a general point, it would be great if at some point these could be given custom CSS support so we could differentiate them more on the menu and highlight.

(Joe) #17

Sure, there are now two classes added to each link you insert with this theme. The first one is applied to all links


and the second one is applied to each individual link and is derived from its text. So a link with the text

footer link

would now have the class

footer-link added to it.


So this works already?! Awesome!

So if I have a single word link, e.g. ‘Welcome’ that can be styled with the .Welcome class? Is this in any way nested?

One more Q: if I may: Can I declare that class in a separate Theme component or must place it in the Hamburger Link Component?

(Joe) #19

Yes, this works now, just be sure the theme component is updated.

Yes you can, but that would be a very generic selector, so it’s better to make it a little bit more specific by including the other class. Instead of

.welcome {
  // properties

you can use

.custom-hamburger-link.welcome {
  // properties 

Note the lack of space between the selectors.

This should also be fine, you can style the links in any theme component. The styles don’t need to be added to this theme component - and nor should they since updates would remove any custom code you add to it.


Great, that way I don’t wipe out the CSS with an update.

And, btw, have that all working, thanks so much Joe!!!

This is a really nice, tidy, solution that dovetails with & leverages the existing design, great!