# Sidebar Menu Reorder

**URL:** https://meta.discourse.org/t/sidebar-menu-reorder/394049
**Category:** Theme component
**Tags:** sidebar
**Created:** [January 22, 2026, 2:28am UTC](https://meta.discourse.org/t/sidebar-menu-reorder/394049 "2026-01-22T02:28:08Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [January 22, 2026, 2:28am UTC](https://meta.discourse.org/t/sidebar-menu-reorder/394049/1 "2026-01-22T02:28:08Z")

</div>

| | | |
| --- | --- | --- |
| ℹ | **Summary** | Allows reordering default and custom sidebar menu sections |
| 👓 | **Preview** | [https://discourse.theme-creator.io/theme/Lilly/discourse-sidebar-menu-reorder](https://discourse.theme-creator.io/theme/Lilly/discourse-sidebar-menu-reorder) |
| 🛠 | **Repository** | [https://github.com/Lillinator/sidebar-menu-reorder](https://github.com/Lillinator/sidebar-menu-reorder) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |

Install this theme component

## 💡 Introduction

I have seen a number of requests from Discourse admins wanting to reorder sidebar menu sections, including global custom sections. Since it currently isn’t very intuitive or straightforward for most people to do with CSS, and doing so can be difficult to manage and make changes to, I created a theme component that makes it much easier in the admin UI.

## 👩🏻‍💻 Overview

This Discourse theme component lets administrators reorder their forum’s sidebar menu sections in the admin user interface, including all the default sections as well as any globally visible custom sections.

The component works for both desktop and mobile sidebar views, as well as header dropdown mode (although ideally, it is made for sidebar mode).

* * *

## 🔧 Installation & Configuration

- Install this theme component as per [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966).
- The `community` section refers to the default top section of the sidebar - the menu with the **Topics** header and includes the **More** dropdown submenu; it is recommended that no more than one or two sections (default or custom) be moved above the `community` section.
- Do not delete any of the default sections in the setting, or they will be out of order (you can always add them back or reset the setting).
- The best way to configure this component is to have the component admin screen with the reorder list setting in one browser window, and the forum sidebar view as a test user in another one beside it; reload the page after every menu section order change in the list.
- In the component admin setting, be sure to use slug naming format for the custom sections or they will get ignored (ie: use `custom-menu-name` for “Custom Menu Name”, `useful-links` for “Useful Links”, etc.)

* * *

## ⚙ Settings

| Setting | Description |
| --- | --- |
| `Sidebar menu order` | A list setting that contains the default menu sections. (`community` is the default top section in the sidebar and includes the `More` dropdown submenu.) Reorder the menu sections with the up and down arrows on the side. Globally visible custom sections can be added as well - use the menu name slug (e.g., for a custom menu titled Test Menu, add `test-menu` in the setting). |

The theme component initially has the default settings. Admins need to add any global custom menu sections they wish to mix into the ordering list, and then reorder them along with the default sections.

> **screenshot of default component setttings**
>
> ![image](https://global.discourse-cdn.com/meta/original/4X/8/a/c/8ac26ac0db61fa4fa6faeafc7a8649eb5145fb4a.jpeg)

* * *

## 📸 Screenshots

The screenshots below show the `community` section, and two example custom menu sections called “Dev Links” (`dev-links`) and “Toolbox” (`toolbox`) as they appear in the component admin panel on the left, and to a regular user on the right. The arrows to move a menu section up and down in the component admin setting are shown in the small red box.

 ![image](https://global.discourse-cdn.com/meta/original/4X/4/2/3/423ae80b29b40a0ee733c7351683063700507d75.jpeg)

* * *

Here, the setting is configured to show the default `categories` section above the `community` section (collapsed and expanded modes):

 ![image](https://global.discourse-cdn.com/meta/original/4X/4/2/4/4247fb1935ff23ab37270003f40853126524fda1.jpeg)  
 ![image](https://global.discourse-cdn.com/meta/original/4X/8/4/8/8481b4d421388eb402149fb449d37cdae3e9d491.jpeg)  
 ![image](https://global.discourse-cdn.com/meta/original/4X/9/9/5/9957e639b9d92a2cece59c24a5fab60656f52a1d.jpeg)

Here is an example using two custom sections: one called `dev-links` that is above the default `community` section, and another called `toolbox` that sits below the default `tags` section.

 ![image](https://global.discourse-cdn.com/meta/original/4X/c/e/e/cee7bbd71eb17cf38dc5cc056be7b8fdb26c33af.jpeg)  
 ![image](https://global.discourse-cdn.com/meta/original/4X/7/0/4/704aca474311fe2052dadc4360a0a94008411931.jpeg)  
 ![image](https://global.discourse-cdn.com/meta/original/4X/2/4/b/24bd6eaed208110404332aad7e68c99e31b71ba3.jpeg)

Also, note the section called `inbox-section` in the above admin screenshot - this is the `Messages` section that the [Messages section for sidebar](https://meta.discourse.org/t/messages-section-for-sidebar/389664) component inserts into the sidebar (under the `toolbox` custom menu above), showing that this component can be used to move it around as well.

In Addition, this theme component can be used along with [Group sidebar menus](https://meta.discourse.org/t/discourse-group-sidebar-menus/394653) and [Indented subcategories](https://meta.discourse.org/t/discourse-indented-subcategories/393838) components (see in screenshot above).

* * *

## 👉 Notes

- After adding new global custom sections to the `sidebar_menu_order` setting, forum users will see the new correct menu order when they reload their browser or collapse/expand the sidebar.
- Creating new global custom menu sections while this component is enabled can result in temporary duplicate sections for the admin until the sidebar is re-rendered, either with a page refresh or by collapsing and expanding.
- User-created custom menu sections will always appear at the bottom of the sidebar for that user, but are otherwise unaffected.
- If the `Admin -> All Site Settings -> Chat Separate Sidebar Mode` setting is set to `Always`, the chat button will appear as usual at the bottom, and the component will ignore the default chat menu sections (`chat-dms`, `chat-channels`, and `chat-search`).

* * *
 **[Check out my other Discourse stuff](https://meta.discourse.org/filter?q=category%3Acustomization%20created-by%3ALilly%20order%3Acreated)**

---

<div class="post-metadata">

### Author: ![David\_Ghost](https://avatars.discourse-cdn.com/v4/letter/d/c37758/32.png) [@David\_Ghost](https://meta.discourse.org/u/David_Ghost)
#### Post date: [January 22, 2026, 4:47pm UTC](https://meta.discourse.org/t/sidebar-menu-reorder/394049/2 "2026-01-22T16:47:17Z")

</div>

It’s so cool. I really like to use the categories (1) then chat (2) setup. Thank you very much for your nice work Lilly

---

<div class="post-metadata">

### Author: ![R23D\_Printing](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/r23d_printing/32/544902_2.png) [@R23D\_Printing](https://meta.discourse.org/u/R23D_Printing)
#### Post date: [February 25, 2026, 10:47pm UTC](https://meta.discourse.org/t/sidebar-menu-reorder/394049/3 "2026-02-25T22:47:09Z")

</div>

Is this still supported? I tried to install and I got the following error. I tried from here and also using the manual instructions.

 ![Screenshot_20260225-174622](https://global.discourse-cdn.com/meta/original/4X/1/f/d/1fdec6d156be8fd5c8c754bab4d7011abc35c20d.png)

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [February 25, 2026, 10:55pm UTC](https://meta.discourse.org/t/sidebar-menu-reorder/394049/4 "2026-02-25T22:55:55Z")

</div>

Yes it is. The link in the “install this theme component” button is outdated, but the link at the top is still correct and you can use that for installing the component manually

Or you try this button

Install this theme component

---

<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: [February 26, 2026, 12:00am UTC](https://meta.discourse.org/t/sidebar-menu-reorder/394049/5 "2026-02-26T00:00:36Z")

</div>

I’ve just fixed the link in the install button in the OP so all good now.

---

<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: [March 3, 2026, 3:26am UTC](https://meta.discourse.org/t/sidebar-menu-reorder/394049/6 "2026-03-03T03:26:27Z")

</div>

I’ve come across a bit of a bug, where the specified order isn’t working when I have an unusually narrow ‘desktop’ screen - as on my folding phone.

> **Summary**
>
> This is how I want it to look:
> 
> ![image](https://global.discourse-cdn.com/meta/original/4X/d/b/2/db21ce249cd553b14c2b7495ad6522642bac6626.png) &nbsp;&nbsp;&nbsp; ![image](https://global.discourse-cdn.com/meta/original/4X/5/e/d/5edd5c1a30df0f8470a35bacca74cdb83a52173b.png)
> 
> When I have a weird sized screen (seems to be a width of 640-820 or so), I lose the order:
> 
> ![image](https://global.discourse-cdn.com/meta/original/4X/4/1/a/41a192f578a62bc305ca44ed384a8b832e0b4dc5.png)

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [March 3, 2026, 10:47am UTC](https://meta.discourse.org/t/sidebar-menu-reorder/394049/7 "2026-03-03T10:47:56Z")

</div>

oh god the return of the 2 column sidebar. i thought that thing was gone? will have a look…

edit: i can’t repro this - when i adjust the browser size on my ipad to get the 2-column compact sidebar, it is in the correct order specified by the component. when i adjust the viewport size using the dev console, the sidebar shows it in the correct order as well (regardless of the viewport size). 🤷🏻‍♀️

 ![IMG_0012](https://global.discourse-cdn.com/meta/original/4X/e/f/7/ef799f591f0fd0f62bd58f694a98d1c96597d140.jpeg)

 ![Screenshot 2026-03-03 at 3.21.39 AM](https://global.discourse-cdn.com/meta/original/4X/f/8/c/f8c30da51a4a30a9b680524f4c3f5f39f4bbd095.png)

---

<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: [March 3, 2026, 11:20pm UTC](https://meta.discourse.org/t/sidebar-menu-reorder/394049/8 "2026-03-03T23:20:00Z")

</div>

Was indeed me being a bit thick! I was using the old component and didn’t even notice.

I have picked up one thing though - what has been called `community` is now called `the-forum` instead. ~~Here is a PR to tidy that up in the defaults:~~

[https://github.com/Lillinator/discourse-sidebar-menu-reorder/pull/3](https://github.com/Lillinator/discourse-sidebar-menu-reorder/pull/3)

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [March 4, 2026, 12:36am UTC](https://meta.discourse.org/t/sidebar-menu-reorder/394049/9 "2026-03-04T00:36:46Z")

</div>

> [@nathank](#):
>
> what has been called `community` is now called `the-forum` instead

On my forum it’s still called `community` and here on Meta too.

 ![image](https://global.discourse-cdn.com/meta/original/4X/0/c/4/0c41bc7e6038270d3ccef3a62d88d5e648422720.png)  
I wonder how you changed it.

---

<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: [March 4, 2026, 12:56am UTC](https://meta.discourse.org/t/sidebar-menu-reorder/394049/10 "2026-03-04T00:56:22Z")

</div>

That is indeed weird! I do recall changing the text on it at some stage now I think about it. But not sure how that got into the HTML!

I’ll withdraw that PR and scratch my head a bit more. It might have to remain a ‘quirk’ of my site!

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [March 4, 2026, 3:57pm UTC](https://meta.discourse.org/t/sidebar-menu-reorder/394049/11 "2026-03-04T15:57:11Z")

</div>

you should be able to do some rails commands to rename it back. if your section is indeed called `the-forum`, then i think this should work from the rails console:

```plaintext
cd /var/discourse
./launcher enter app
rails c

```

```ruby
section = SidebarSection.find_by(title: 'the-forum', public: true)
if section
  section.update!(title: 'community')
  puts "Done: renamed to 'community'."
else
  puts "Section not found."
end

```

definitely back up first.

---

<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: [April 8, 2026, 12:16am UTC](https://meta.discourse.org/t/sidebar-menu-reorder/394049/12 "2026-04-08T00:16:19Z")

</div>

Just (finally) tried this. It didn’t find the section though:

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

I think that this might just have to remain a quirk of the site, eh?

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [April 8, 2026, 1:58am UTC](https://meta.discourse.org/t/sidebar-menu-reorder/394049/13 "2026-04-08T01:58:29Z")

</div>

@nathank - ok i played around with this on my test instance and i was able to rename the section `the-forum` and then back to `community`.

when in the rails console, if you do:

```ruby
SidebarSection.where(public: true).pluck(:id, :title, :section_type)

```

what does it output?

i am guessing it should give something like:

```ruby
=> [..., [1, "the-forum", "community"]]

```

or

```ruby
=> [..., [1, "The Forum", "community"]]

```

which would verify it is `section_type` = `community` with a different title. then we can do:

```ruby
# find the default community section via rails enum
section = SidebarSection.find_by(section_type: :community)

# fallback: if not found by type, then look for the specific custom title
section ||= SidebarSection.find_by(title: 'the-forum', public: true)

if section
  section.update!(title: 'Community')
  puts "Success: The section has been renamed back to 'Community'."
else
  puts "Error: Section not found."
end

```

screenshot of my rails console showing the community section titled `the-forum` and renaming it back to `Community`, then verifying it was changed:

 ![Screenshot 2026-04-07 at 10.42.57 PM](https://global.discourse-cdn.com/meta/original/4X/d/2/e/d2ec7e2488f850b358e414ef57489bb1a45c7594.png)

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [April 21, 2026, 11:40pm UTC](https://meta.discourse.org/t/sidebar-menu-reorder/394049/14 "2026-04-21T23:40:29Z")

</div>

Note: i just pushed some mobile fixes for this component - it had started rendering the horizontal lines between sidebar sections that should only show on desktop/tablet views.

---

<div class="post-metadata">

### Author: ![tobiaseigen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tobiaseigen/32/539204_2.png) [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [June 5, 2026, 6:49pm UTC](https://meta.discourse.org/t/sidebar-menu-reorder/394049/15 "2026-06-05T18:49:30Z")

</div>

I’m using this lovely theme component alongside Lilly’s equally lovely [Discourse Group Sidebar Menus](https://meta.discourse.org/t/discourse-group-sidebar-menus/394653) component. My use case is creating custom menus for clients so everyone in an organization can have quick links relevant specific to them, right at the top, after the community section.

Wanted to note for future travelers (including myself) that the sidebar section name is very sensitive and has to be an exact match, with spaces in the name converted to dashes. So “Doing business” becomes “doing-business”.

This is all well and good but when I created the group sidebar section I had put a space at the end of the group name accidentally, which became “doing-business-”. It took me some troubleshooting with developer tools to discover this.

These features are so important to me that I would really appreciate them being considered for adding to core, so they can be more readily available and easy to use on any discourse site. 🙏

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [June 5, 2026, 7:31pm UTC](https://meta.discourse.org/t/sidebar-menu-reorder/394049/16 "2026-06-05T19:31:46Z")

</div>

> [@tobiaseigen](#):
>
> Wanted to note for future travelers (including myself) that the sidebar section name is very sensitive and has to be an exact match, with spaces in the name converted to dashes. So “Doing business” becomes “doing-business”.

thanks Tobias. i actually mention to use the section name slugs in the setting description, and it is also indicated in the screenshot examples (see “dev-links” = DEV LINKS).

> [@Lilly](#):
>
> Globally visible custom sections can be added as well - use the menu name slug (e.g., for a custom menu titled Test Menu, add `test-menu` in the setting).

perhaps i should add it elsewhere besides the setting descriptions. 🤔

edit: done

> [@Lilly](#):
>
> - In the component admin setting, be sure to use slug naming format for the custom sections or they will get ignored (ie: use `custom-menu-name` for “Custom Menu Name”, `useful-links` for “Useful Links”, etc.)

---

<div class="post-metadata">

### Author: ![satonotdead](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/satonotdead/32/447830_2.png) [@satonotdead](https://meta.discourse.org/u/satonotdead)
#### Post date: [July 30, 2026, 3:21am UTC](https://meta.discourse.org/t/sidebar-menu-reorder/394049/17 "2026-07-30T03:21:01Z")

</div>

Is it possible to use/reorder the same slug on sidebar with this theme component?

My usecase is displaying the same title but with different level access between free or subscribed users.

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [July 30, 2026, 3:33am UTC](https://meta.discourse.org/t/sidebar-menu-reorder/394049/18 "2026-07-30T03:33:25Z")

</div>

not really sure what you mean? this just reorders sections - slugs names need to be unique. call them different things and use [Group Sidebar Menus](https://meta.discourse.org/t/group-sidebar-menus/394653) with it.

---

<div class="post-metadata">

### Author: ![satonotdead](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/satonotdead/32/447830_2.png) [@satonotdead](https://meta.discourse.org/u/satonotdead)
#### Post date: [July 31, 2026, 1:25pm UTC](https://meta.discourse.org/t/sidebar-menu-reorder/394049/19 "2026-07-31T13:25:31Z")

</div>

Fair enough. I just need to come up with a very similar name for the ‘new’ sidebar section.

I’m trying to use two different links in the same navbar section to segment accordingly. The ‘you have not access’ usual behavior is little tough to me.

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [July 31, 2026, 1:33pm UTC](https://meta.discourse.org/t/sidebar-menu-reorder/394049/20 "2026-07-31T13:33:49Z")

</div>

> [@satonotdead](#):
>
> The ‘you have not access’ usual behavior is little tough to me.

i have no idea what this means in relation to this component

[Next page](https://meta.discourse.org/t/sidebar-menu-reorder/394049.md?page=2)
