Nest subcategories under their parent categories in the sidebar

It sounds as though your use case is more suited to discourse-docs than the sidebar.

You can see an example of the view and filtering it provides here Docs - Discourse Meta

Yeah, didn’t see that coming at all. I do think the slidebar version of the sidebar is well suited to those pesky mobile devices.

So maybe you know, is this the mobile app that comes with the lucky forums at Digital Ocean?

Stephen, thanks for this suggestion. I installed it and am playing with it. It might work for a large set of articles that we have not added yet. What I need for those is the ability to comment in order to draw the reader into discussions. I have been thinking of integrating Ghost with Discourse for the purpose.

I do still think the sidebar will be ideal for desktop/laptop navigation if it comes with a toggling scrollbox for tags, and with toggling categories.

1 Like

This part was delivered in PR

FEATURE: double color for subcategories prefix by lis2 · Pull Request #18525 · discourse/discourse · GitHub

5 Likes

The color badge is very helpful for distinguishing parent-subcategory relationships. Sorting and possibly indenting should solidify the visual identification of subcategories. Here’s what I mean:

documentation is the parent category to admins and sysadmin. In the current setup, they are sorted by alpha and the only indication of a relationship is the half-badge color. Obviously, this is not ideal.

When sorted, we get a sense of order and relationship, but still it’s only a color badge distinction.

A better way would be to give the subcategory a subtle indent which is universally understood as an indication of a category-subcategory relationship. The mockup above shows what that might look like when the subcategory is indented by a half- or full-width of the badge.

11 Likes

Thanks for taking the time to mock up these ideas!

There’s another scenario to think about: when users have all the above categories in their sidebar that you’ve illustrated but not the #documentation parent category. How would you imagine handling that scenario?

1 Like

I suppose it would depend on the site’s structure. In my OP where I used Ford and GM as an example of a structured community, not including a parent category could make the sidebar hard to read—which is which?

In this case, the parent category should be shown:

  • Driving
  • Driving

In cases where each subcategory can stand on its own, the parent may not be necessary.

For categories with subcategories, my community treats the parent as a placeholder that has no topics. Instead the topics are all in subcategories. We do have other standalone categories.

So, ideally an admin would be able to choose whether the parent category is listed in the sidebar.

:white_check_mark: Display hierarchy in sidebar

4 Likes

The order of subcategories in the sidebar now sort first by their parent per this PR by @tgxworld:

5 Likes

Did anyone figure out a solution for nested subcategories? Still browsing around and couldn’t find any theme components that work.

3 Likes

Agreeing on this. Were there any updates about this? Or will there be in the near future?

2 Likes

We don’t have any immediate plans to make additional changes here.

Note that you can now see that subcategories do sort below their parent (for example, the subcategories of documentation on meta):

Screenshot 2023-07-24 at 2.34.27 PM

Also, the UI for selecting categories has changed since this discussion began, and within that dialog, subcategories are nested.

This should help make them more discoverable for people choosing which ones to add to their sidebar.

3 Likes

Greetings!

By serendipity, I happened upon this article. Its resemblance to my previously penned composition is striking.

Curious to know – do the discourse team have envisaged solutions on this matter, or can the issue be regarded as settled?

I don’t know for certain, but I feel like if parent category is shown, then perhaps the subcategories can be targeted with CSS to indent them to provide a nested appearance? Can possibly use a ::before pseudo-element? :woman_shrugging:t2:

Maybe I’ll see what I can come up with for one of my navigation menu components when I update them. I have the logic in my mind of how it might be accomplished, but I am unsure if it is actually possible. In my dreams, not only are subcategories nested, but it’s also possible to collapse subcategories into their parent categories by clicking the bullet. :laughing: :exploding_head:

4 Likes

I’m joining in so i get notifications if any changes occur as we also have too many subcategories for the sidebar to present without building a tower, which messes up the UX improvement the sidebar brings.

The best solution we’ve got now for now is to have users pick their groups and only see the categories related to those groups, plus one default one, which works until a user selects too many and builds a tower in their sidebar.

@Lilly if that method doesn’t work out, i wondered whether the tool to create nested categories already exists.

Could the Add Custom section module be told to automatically add all top-level categories as their own section, and pull in their sub categories underneath.

This method would give users excellent control over their sidebar, as they’d all have an edit function built in.

The downside is that users would lose the coloured box icon for the category, and probably the function which shows how many new posts are in each section.

1 Like

Was there ever a solution to this?

It seems crazy that all we can have is one massive long list… there doesn’t even seem to be any class added to subcategories that we can manually style with a small indent.

Looking to achieve something close to the following:

Marketing ⌄

  • Customer Centricity
  • Technology
  • Tools

I don’t know, I’ve been thinking about this a lot lately - I mean the whole category section is customizable by individual users and this is the preferred way and should be encouraged. Since subcategories can be added without their parent categories and they have half-colored bullets to indicate their subcategory status, I think the nested/ indented list isn’t really worth the trouble, especially given the arduous and difficult programming task to achieve it. From a functional perspective, perhaps the idea of collapsible parent categories (like the More section for example) by clicking the bullet seems more attractive to me than indenting, albeit an even more difficult programming endeavour. :thinking:

1 Like

Then utilize the subcategories’ IDs, which are somewhat bothersome but functional:

li.sidebar-section-link-wrapper {
  &[data-category-id="10"], /*subcategory ID*/
  &[data-category-id="11"], /*subcategory ID*/
  &[data-category-id="12"], /*subcategory ID*/
  &[data-category-id="13"]  /*subcategory ID*/ {
    margin-left: 1em;
  }
}

2 Likes

Oh, this is a cool solution!!! Thanks for sharing :raised_hands:. My question is, is it possible to do something similar with regular links in the sidebar? :sweat_smile:

Open your dev console and take a look to the data-list-item-name record:

Then you can target them in your CSS, e.g.

li.sidebar-section-link-wrapper {
  &[data-list-item-name="New"], 
  &[data-list-item-name="Global leaderboard"], 
  &[data-list-item-name="Test leaderboard"] {
    margin-left: 1em;
  }
}

image

With a similar approach you can move a whole section instead of single links:

.sidebar-section-wrapper.sidebar-section[data-section-name="new-global-links-section"] {
    margin-left: 1em;
}

4 Likes

Hello @dax! Please forgive me for the long response :pray:
Yes, it’s magic :sparkles: and it works, I’ve been looking for a solution like this for the last 3 months, I’m deeply grateful to you :raised_hands:

1 Like