Topic list sidebar navigation

:warning: Because it uses modern CSS features, this component will not work in Internet Explorer (at all) or versions of Edge, Firefox, Safari, or Chrome that were released before May 2017 (version details here).

:microscope: Preview it on the theme creator

:link: Github repo:

:man_shrugging: How do I install a theme component?

What does this theme component do?

The short version: This takes our standard topic list navigation and puts it into a sticky sidebar (as long as your browser is wider than 768px). You also have the option in the settings to show the sidebar on the right.

The long version: We’ve talked about this layout a little bit on Meta previously (Proposing a left-aligned slide out hamburger menu), and I was curious to see what it would be like to simply move our existing navigation to a sidebar.

To build this I used a combination of grid, flexbox, and a value for position called sticky. Sticky is very new to browsers (version support), and as you’d guess, it makes an element sticky on scroll… the nice thing about it is that unlike position: fixed, it doesn’t take your element out of its existing position in the layout. If your browser doesn’t support sticky, the sidebar simply doesn’t stick.

Keep in mind that since this is a drastic layout change, this component may not be immediately compatible with other themes.


It would not be possible to use it with the plugin, if only :frowning:

Custom Layouts Plugin @angus

1 Like

Could you “push” the sidebar further to the side?

It’s possible, but it’s currently designed to use the standard 1110px width that Discourse content exists within.

You could add CSS like this to make the content on pages with the sidebar wider

@media screen and (min-width: 1110px) {
  body[class*="category-"]:not(.archetype-regular):not(.archetype-banner) { 
    .wrap {
        max-width: 1400px;

You could even go really crazy and set something like max-width: unset; and have a browser-wide topic list



Am using this component with this plugin

i have forked the above plugin and made changes on CSS to show it on the right side.
when install this component Topic list sidebar navigation its showing left but taking the sidebar also to the left

how i can show this component on left and keep the sidebar with HTML Content on right ? so the topic listing stays in middle ?

This theme component breaks when you’re viewing a tag page (

See for yourself: Topics tagged quemuse


Sorry for the delay — I’ve been busy. If you update the component it will work on tag pages now.


hi. may you update this theme based on the new version of fontawesome used in discourse (SVG images)?


also if other links are added to the top nav using this theme component, the highlighted tab doesn’t work correctly. i.e. the latest is always shown in orange even if you are in another top navigation link.


Hello, i wanna display this sidebar on every topic and every category
When in homepage, top menu unstill display normal
How can i do that?

Everytime we wanna search, we must comback to homepage and search them, so lost a long time! :slight_smile:
We should solve this problem!
Thank you!


Incredible theme component!

I think the topic list sidebar should appear in tag lists as well, so when you view say #subfolder the sidebar will remain consistent across all pages and serve to be more useful. This will be a very neat feature. :slight_smile:

I am having this same problem with Font Awesome not showing in this part.

Were you able to fix this?