# Topic List Sidebars

**URL:** https://meta.discourse.org/t/topic-list-sidebars/107561
**Category:** Theme component
**Tags:** official, topic-list-sidebars
**Created:** [January 25, 2019, 9:35pm UTC](https://meta.discourse.org/t/topic-list-sidebars/107561 "2019-01-25T21:35:47Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [January 25, 2019, 9:35pm UTC](https://meta.discourse.org/t/topic-list-sidebars/107561/1 "2019-01-25T21:35:47Z")

</div>

> ℹ Formerly “Discourse Category Sidebars” — the name of this theme component has been updated to **Topic List Sidebars** now that it supports both categories and tags.

| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | **Topic List Sidebars** takes a topic and applies it as a sidebar for a category or tag’s topic list. |
| 👓 | **Preview** | [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/topic-list-sidebars) |
| 🛠 | **Repository Link** | [https://github.com/discourse/discourse-topic-list-sidebars](https://github.com/discourse/discourse-topic-list-sidebars) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

Install this theme component

> [@](#):
>
> :discourse2: As this is an #official theme component maintained by the Discourse team, #Support, #Contribute > Bug, #Contribute > UX, and #Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started. 👍
> 
> [❓&nbsp; **Support**](https://meta.discourse.org/new-topic?category_id=6&tags=topic-list-sidebars "Ask for support on configuring and using Topic List Sidebars") [🐛&nbsp; **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=topic-list-sidebars "A bug report means something is broken, preventing normal/typical use of the theme component") [👀&nbsp; **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=topic-list-sidebars "Discussion about the user interface of Topic List Sidebars, and how features are presented (including language and UI elements)") [💡&nbsp; **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=topic-list-sidebars "Discussion about how existing Topic List Sidebars features can be improved or enhanced, and how proposed new features could work")

### Features

This theme component takes a topic and applies it as a sidebar for a category or tag’s topic list. These sidebars are only visible when the browser is 767px or wider (most tablets and monitors).

 ![topic list sidebar example](https://global.discourse-cdn.com/meta/original/3X/0/6/06232990c15daef67651d20fb17e9be04686e5be.png)

### What can I do with this theme component?

- Choose a topic and display its content as a sidebar for a category or tag.

- Set a sidebar to be displayed on the /latest, /new, /unread, and /top pages by using `all` as the category name in your settings.

- Choose for the sidebars to appear on the left or the right of the topic list.

- By default a category’s sidebar will also display for all its subcategories unless a subcategory has its own sidebar defined (you can disable this by unchecking the `inherit parent sidebar` setting).

### How do I configure it?

Choose your categories and tags, and add the id of the topic (e.g. example.com/t/example-topic/ **57** ) that you would like to use to populate the sidebar’s content

 ![edit sidebar settings](https://global.discourse-cdn.com/meta/original/4X/1/0/6/106db0ef1e23d25ef4d17e5acef8a7e06ffc7ade.png)

I recommend creating sidebar topics in their respective categories/tags, closing the topic so there are no replies, and unlisting it (so it doesn’t appear in the topic list).

Note that you cannot use a topic in a private category as a sidebar in a public category (you can technically, but users without access to that private topic will just see a empty sidebar!).

### Settings

| Name | Description |
| --- | --- |
| sidebars | Add and remove sidebars |
| sidebar side | Choose from Left or Right |
| inherit parent sidebar | If checked subcategories will inherit their parent category’s sidebar (unless the subcategory has its own sidebar assigned).   
  
When unchecked subcategories will only display a sidebar if one is specified. |
| stick on scroll | When checked sidebar has a sticky position on scroll |

### Developer Notes

Each category sidebar is wrapped with a class that contains the category slug, so for the staff category that would be `.category-sidebar-staff`. You can use these classes to style the individual sidebars.

The body tag on pages with sidebars also has a class added so you can use `body.custom-sidebar` to apply styles on all pages that have a sidebar.

### Credits

❤ Special thanks to @xrav3nz for laying the groundwork to make this component possible!

  

> :discourse2: **Hosted by us?** Theme components are available to use on our Standard, Business, and Enterprise plans.

> Last edited by @JammyDodger 2024-06-18T11:18:45Z
> 
> > **Check document**
> >
> > Perform check on document:

---

<div class="post-metadata">

### Author: ![emilio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/emilio/32/132550_2.png) [@emilio](https://meta.discourse.org/u/emilio)
#### Post date: [March 7, 2019, 7:22pm UTC](https://meta.discourse.org/t/topic-list-sidebars/107561/12 "2019-03-07T19:22:40Z")

</div>

Trying to figure out how to make this work with tags as well. (we use tags heavily rather than having tons of categories.)

It looks like it may be about replacing `controller:navigation/category` with whatever the equivalent for tags is but not sure.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [March 8, 2019, 3:28am UTC](https://meta.discourse.org/t/topic-list-sidebars/107561/13 "2019-03-08T03:28:31Z")

</div>

I just took a quick look and it’s possible to do this for tags…

I’ll probably work on this more tomorrow and spin it off into its own repo.

> [@emilio](#):
>
> It looks like it may be about replacing `controller:navigation/category` with whatever the equivalent for tags is but not sure.

Yep, that’s the core of it — this seems to work for tags:

```js
const controller = container.lookup("controller:tags-show");
const tag = controller.get("tag");

```

**Update** : I’ve got a theme component available, [Discourse Tag Sidebars](https://meta.discourse.org/t/discourse-tag-sidebars/111114)

---

<div class="post-metadata">

### Author: ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [March 8, 2019, 10:16am UTC](https://meta.discourse.org/t/topic-list-sidebars/107561/14 "2019-03-08T10:16:28Z")

</div>

Since I am using the header submenu plugin, A part of the text is covered by my header bar. It would be great if it was possible to add extra margin/offset or whatever it’s called for the case when additional elements before the header are covering the sidebar’s content.

**Also** : is there any way to keep the category drop down menu above the sticky sidebar’s content? that would make it easy for users to jump between categories quickly.

altogether I think the category sidebar is a great plugin and has huge potential to add useful information to the forum structure!

---

<div class="post-metadata">

### Author: ![AstonJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/astonj/32/215041_2.png) [@AstonJ](https://meta.discourse.org/u/AstonJ)
#### Post date: [March 13, 2020, 5:56am UTC](https://meta.discourse.org/t/topic-list-sidebars/107561/27 "2020-03-13T05:56:53Z")

</div>

Another great plug-in Kris, thanks!

I have a few questions/suggestions that I hope you can help with…

1 - Is it possible to make this so that when a user browses the forum, going from page to page the sidebar always checks for the latest version of the post that it contains? At the moment I think the content of the sidebar only updates on a page refresh? Unfortunately content that rarely changes begins to appear stale to users (particularly active users) and so I’d like to update the topic associated with the sidebar frequently if I can. (Similarly, if the ID of the topic in the options for that page is changed, it would pick it up on the next page-view). I’m quite happy for the additional load per page/view but if you’re worried others may not be perhaps you could add a “cache post contents” option which would make it work like it does now.

2 - Is it possible to associate/pick up content from more than one topic per sidebar please? So for example on the Latests page you might want the content from topics 33,55 (and in that order). This would be great to allow different content per page while also include common info/links that you might want to appear at the bottom of every sidebar.

3 - Is it possible to expand the plugin so it can be used site-wide please? At the moment I think it can only be used on certain pages? Ideally I’d like to use this across the whole forum on all main sections/pages. (Perhaps your tags sidebar plugin could be used in conjunction with this for finer control - eg for individual tags and/or Topics - I think both combined could become a very power sidebar package!!)

4 - Is it possible to add a sidebar width option as well as a configurable cut-off/display-none point please? This isn’t a biggie as it can be done via css changes but think it would be nice to have in the options.

5 - Last but not least… could you get polls to work please? I think allowing users to vote in polls right out of the sidebar would be awesome!!! I find dynamic content like this in sidebars can make them interesting to users, and so less likely that they’ll automatically ignore them.

I think with all the above this plugin would make a very good candidate to be included in core or an official DC plugin - imo it could help people put an individual stamp on their forums and I’m sure people would use them in fun and interesting ways! 😃

---

<div class="post-metadata">

### Author: ![marielavd10](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/marielavd10/32/196370_2.png) [@marielavd10](https://meta.discourse.org/u/marielavd10)
#### Post date: [October 7, 2020, 2:16pm UTC](https://meta.discourse.org/t/topic-list-sidebars/107561/31 "2020-10-07T14:16:25Z")

</div>

Hello,

Great component. Is it possible to have such sidebar for each topic under a specific category?

Thanks.

---

<div class="post-metadata">

### Author: ![Ralf\_Stockmann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ralf_stockmann/32/505867_2.png) [@Ralf\_Stockmann](https://meta.discourse.org/u/Ralf_Stockmann)
#### Post date: [August 13, 2021, 1:09pm UTC](https://meta.discourse.org/t/topic-list-sidebars/107561/42 "2021-08-13T13:09:53Z")

</div>

What is the syntax to adress a subcategory? Things I tried so far:

category/subcategory,123  
subcategory,123  
category-subcategory,123

None of these seem to work. Main categories are displayed, though.

---

<div class="post-metadata">

### Author: ![Ralf\_Stockmann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ralf_stockmann/32/505867_2.png) [@Ralf\_Stockmann](https://meta.discourse.org/u/Ralf_Stockmann)
#### Post date: [August 30, 2021, 9:50am UTC](https://meta.discourse.org/t/topic-list-sidebars/107561/43 "2021-08-30T09:50:53Z")

</div>

> [@Ralf\_Stockmann](#):
>
> What is the syntax to adress a subcategory?

Hm, anyone, please? It shouldn’t be that hard to give an answer…

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [August 31, 2021, 4:12am UTC](https://meta.discourse.org/t/topic-list-sidebars/107561/45 "2021-08-31T04:12:18Z")

</div>

It looks like there was a regression and subcategories weren’t working in some cases, the syntax should be the same as categories: `subcategory, 123`

I’ve refactored the theme, so if you update it subcategories should work as expected!

---

<div class="post-metadata">

### Author: ![Ralf\_Stockmann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ralf_stockmann/32/505867_2.png) [@Ralf\_Stockmann](https://meta.discourse.org/u/Ralf_Stockmann)
#### Post date: [August 31, 2021, 9:11am UTC](https://meta.discourse.org/t/topic-list-sidebars/107561/46 "2021-08-31T09:11:28Z")

</div>

> [@awesomerobot](#):
>
> I’ve refactored the theme, so if you update it subcategories should work as expected!

That did the trick: perfect!  
Thank you so much, just in time for our grand opening.

---

<div class="post-metadata">

### Author: ![hyphalos](https://avatars.discourse-cdn.com/v4/letter/h/3ab097/32.png) [@hyphalos](https://meta.discourse.org/u/hyphalos)
#### Post date: [May 19, 2022, 12:08am UTC](https://meta.discourse.org/t/topic-list-sidebars/107561/47 "2022-05-19T00:08:26Z")

</div>

Awesome plugin!

Is this by any chance possible for groups as well? Having a sidebar for groups would be great to give information about the group.

Can anyone direct me in a way to get the group parameters (let the component know you’re inside a group) so I can attempt it and create a PR myself?

---

<div class="post-metadata">

### Author: ![keegan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/keegan/32/383395_2.png) [@keegan](https://meta.discourse.org/u/keegan)
#### Post date: [May 20, 2022, 6:26pm UTC](https://meta.discourse.org/t/topic-list-sidebars/107561/48 "2022-05-20T18:26:26Z")

</div>

@hyphalos I’ve created a [Groups Widget](https://meta.discourse.org/t/groups-widget-layouts-plugin/205586) that can be added to sidebars of the [Layouts Plugin](https://meta.discourse.org/t/custom-layouts-plugin/55208).

Perhaps the code I had for that will help you to write your PR:  
[https://github.com/paviliondev/layouts-groups-widget](https://github.com/paviliondev/layouts-groups-widget)

Alternatively, you could also use the Layouts plugin and the widget itself.

---

<div class="post-metadata">

### Author: ![Ralf\_Stockmann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ralf_stockmann/32/505867_2.png) [@Ralf\_Stockmann](https://meta.discourse.org/u/Ralf_Stockmann)
#### Post date: [December 9, 2022, 4:30pm UTC](https://meta.discourse.org/t/topic-list-sidebars/107561/49 "2022-12-09T16:30:30Z")

</div>

It might be a bit bold to ask for it, since it’s called _sidebar_, but: would it be possible to add an option to place the content not beside, but always _above_ the topic list?

We use Discourse as a social intranet, and for some categories we have the need for a well-maintainable area for links, lists of people, etc. - this machanism would be great for that, but there is just too little space in the sidebar.  
CSS hacks are also welcome.

I’ve already tried the category banners, but they are limited to the first paragraph so this is not an option.

Best,  
Ralf  
(Berlin State Library)

---

<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: [December 13, 2022, 11:28pm UTC](https://meta.discourse.org/t/topic-list-sidebars/107561/50 "2022-12-13T23:28:14Z")

</div>

What about this TC?

> [@Discourse Category Headers theme component](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682):
>
> This theme component provides a number of enhancements for the Discourse category header. The ‘standard’ Discourse category header is displayed at the top of each category page, above the navigation links and list of topics. It is normally only visible if a category logo image has been uploaded in the category settings. The header displays the logo and a short description of the category, taken from the first paragraph of the ‘About the.. category’ topic. This theme component provides the foll…

You will still be stuck with the first paragraph I think. But that could potentially be altered.

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [January 23, 2023, 9:42am UTC](https://meta.discourse.org/t/topic-list-sidebars/107561/51 "2023-01-23T09:42:42Z")

</div>

Hi Kris, This is quite nice.

I was wondering if this could be modified or have an option to move it from a sidebar to Top bar below site header or maybe just below a category logo?

Or if I might get guidance on adding custom css to move it and also have it display for mobile as a top is it sticky bar? anchored just below site main bar?

---

<div class="post-metadata">

### Author: ![bdfl](https://avatars.discourse-cdn.com/v4/letter/b/ea666f/32.png) [@bdfl](https://meta.discourse.org/u/bdfl)
#### Post date: [May 14, 2024, 4:30pm UTC](https://meta.discourse.org/t/topic-list-sidebars/107561/52 "2024-05-14T16:30:54Z")

</div>

I may be misunderstanding how this theme component works, but could it possibly be used to show the list of topics on the left, click on a topic in the list, and have the posts shown on the right (and keep the topic list pinned on the left)? I don’t need to see categories. It would look like Flarum.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [May 14, 2024, 7:56pm UTC](https://meta.discourse.org/t/topic-list-sidebars/107561/53 "2024-05-14T19:56:36Z")

</div>

No, what this component does is take the content from a topic and use it to populate a sidebar for a specific category’s topic list. It is not visible when navigating to a topic.

---

<div class="post-metadata">

### Author: ![bdfl](https://avatars.discourse-cdn.com/v4/letter/b/ea666f/32.png) [@bdfl](https://meta.discourse.org/u/bdfl)
#### Post date: [May 14, 2024, 8:38pm UTC](https://meta.discourse.org/t/topic-list-sidebars/107561/54 "2024-05-14T20:38:13Z")

</div>

Okay, thanks!

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [May 29, 2024, 10:56pm UTC](https://meta.discourse.org/t/topic-list-sidebars/107561/55 "2024-05-29T22:56:02Z")

</div>

Hello everyone! I’ve just merged a big update to this component that does a few things: [FEATURE: include tag sidebars, migrate to objects setting by awesomerobot · Pull Request #22 · discourse/discourse-topic-list-sidebars · GitHub](https://github.com/discourse/discourse-category-sidebars/pull/22)

- Migrates the list style setting to an objects setting. This means:
  - Each sidebar can be configured for multiple categories at once
  - You can now select categories from the dropdown instead of manually adding slugs
  - Includes a tag option as well! this means you’ll no longer need a separate component ([Discourse Tag Sidebars](https://meta.discourse.org/t/discourse-tag-sidebars/111114))

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

Existing settings should migrate automatically on update… unless your slug is different from the category name, then you’ll need to manually update settings.

For example, `site-feedback` will properly migrate to `Site Feedback` but there isn’t a method to migrate slugs that don’t align with names (e.g., your slug for `Site Feedback` is `hamburgers` instead of `site-feedback`).

I will probably change this theme component’s name and deprecate tag sidebars to reflect the new situation.

---

<div class="post-metadata">

### Author: ![mattdm](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mattdm/32/216484_2.png) [@mattdm](https://meta.discourse.org/u/mattdm)
#### Post date: [June 5, 2024, 2:24pm UTC](https://meta.discourse.org/t/topic-list-sidebars/107561/57 "2024-06-05T14:24:40Z")

</div>

> [@awesomerobot](#):
>
> Existing settings should migrate automatically on update… unless your slug is different from the category name, then you’ll need to manually update settings.

Will this automatically migrate tag settings?

With the new setup, can there be different sidebars for the same tag in different categories? How are conflicts resolved?

[Next page](https://meta.discourse.org/t/topic-list-sidebars/107561.md?page=2)
