Option to hide 3rd level categories on the categories homepage without losing the layout

Contribute Feature
1

We use a deep, two-level category structure (all public libraries of our city with their individual branches, plus a central library with its own top-level categories). Recently we needed to introduce a third nesting level in some category branches.
As soon as one category anywhere in the tree has a grandchild category, the categories homepage switches its rendering mode: instead of the compact grid of boxes (parent category with its direct children listed inside), all categories are rendered as a long, single-column list. This makes the homepage extremely long and hard to scan for our ~1,200 staff users.

This appears to be governed by the isGrandParent property described in this related thread: When you add an additional nesting level, all categories, including child categories, are displayed on the categories page

What we’d like

Our preferred option: a way to keep the standard “boxes” homepage layout even when a category has a third nesting level — e.g. by simply not showing the grandchild categories on the homepage (they’d still be reachable via the parent category page).

Alternatively, a native, expandable/collapsible view for categories with grandchildren directly on the categories homepage, so users can expand only the branches they need instead of everything being listed flat.

Why we’re asking for a native/official solution

We’re aware there are theme-component/CSS or JS workarounds (e.g. overriding isGrandParent via modifyClass) discussed in the older thread linked above. We’d prefer not to go down that route: we don’t have deep front-end expertise in-house, and we’re concerned about unexpected side effects or breakage on future Discourse updates if we override core rendering logic ourselves. A supported setting or official option would be much safer for us to maintain long-term.

We’re aware that Discourse doesn’t officially recommend deep nesting, but for our organizational structure (multiple institutions, each with several physical locations, each needing their own space) it isn’t optional for us.
A supported way to control the homepage display for these cases would help a lot and we are sure, since 2021 there could be the need for a hidden 3rd level in other organisations, too?

Screenshots attached: our current 2-level homepage layout

wanted
wanted1278×1289 169 KB

and how it currently breaks once a 3rd level is introduced.

status quo
status quo1414×2000 211 KB

5 Likes
2

I am not sure but this Customization > Theme component might be able to do what your looking for or maybe modified. The DeV maybe open to adding the feature as well

1 Like
3

This is a reasonable request, it can be hard to balance the layout of the /categories page if there are only a few categories with multiple levels of subcategories.

We really don’t want people using modifyClass anymore because, as you mentioned, keeping that sort of override maintained can take some development effort.

We have some newer methods of customization that we can work with now that are easier to keep stable. In this case a value transformer can help. I’ve just added one here that will be available in updates soon: DEV: Add a category-list-subcategories value transformer - Pull Request #42804 - discourse/discourse - GitHub

The simple demo is something like this:

api.registerValueTransformer(
  "category-list-subcategories",
  ({ value, context }) =>
  context.page === "categories" && context.category.level >= 1 ? [] : value
);

This will only show a single level of subcategories. There are other options available using the transformer now, so I’ve put together a theme component that we can maintain to support them.

So once Discourse is updated you can install this to control how many subcategories display on /categories and some other category lists:

Set Categories page depth to 2 to hide all the grandchild categories.

1 Like