This thread discusses the Header Categories Navbar, an official Discourse theme component that adds a horizontally scrolling menu of parent category links to the site header. The component is maintained by the Discourse team, with support and feature requests handled via specific Meta categories.
UX Feedback & Fixes nathank provided initial feedback on mobile usability, highlighting issues with category highlight persistence, lack of scroll indicators, and breadcrumb clashes. awesomerobot promptly merged updates addressing these concerns. Further iterations included fixing color palettes for dark mode (Jagster), adjusting font sizes (nathank), and resolving a bug where the navbar disappeared upon refreshing a category page or clicking a category in a topic (David_Ghost, Arnold). A JavaScript error regarding scrollIntoView was also fixed by awesomerobot.
Compatibility & Customization
Users reported conflicts with other components, such as the Full Width header component, which required custom CSS overrides to ensure proper grid alignment (awesomerobot). Other common queries include:
Sorting: Categories follow the order set on the /categories page; sidebar sorting does not automatically apply to the header (Moin).
Visibility: Requests to hide the navbar on login/signup pages or when scrolling topics are ongoing.
Structure: Users have asked for subcategory dropdowns (stephtara) and options to center the navbar or place it next to the logo (Olle11).
Recent Issues
A persistent issue where the selected category remains highlighted after returning to the homepage was identified by profcaju, who suggested a code fix to clear the activeSlug variable when no category is present in the route.
Header Categories Navbar is a simple component that adds a menu of parent category links to the site header, with horizontally scrolling overflow added if/when needed.
This is really cool - I love it, Kris! It will combine with the sidebar beautifully, allowing the core cats up top and a short personalised selection on the bar.
I’ve noticed two little UX issues that could really give it a lift if addressed:
UX: Category selection highlight
When on a category list, the correct category has a lovely subtle underline.
However, this doesn’t persist if a Topic or a subcategory is entered.
It would be lovely if it did persist in both of those situations.
UX: scroll / overflow on mobile
There is a nice little fade / subtle arrow visible when there is overflow of the categories on desktop.
Overflow is much more likely on mobile, but on my device (Chrome / Android) these subtle cues are not present - and it isn’t clear that scrolling is possible.
It might also help to have the categories bar a little taller on mobile to make scrolling easier.
Also, the category selected isn’t scrolled to automatically - this means that it is not apparent that it is selected unless the user scrolls the Navbar. This is vital really.
Desktop only?
I do wonder if it isn’t really ready for mobile yet, and it would be really handy to have a setting to only apply it to desktop (at least for now).
Brilliant - very happy to give feedback when it is listened to! You’ve had to make quite a few additions to it I note.
I’ll take that as a nice little Christmas to one another .
You’ve fixed this when a Subcategory has been entered - wonderful!
However, it does not apply when a topic is entered - is that deliberate? Personally, I believe that it would make sense if the category stays highlighted while the user is ‘in’ it, which includes the topics and not just the category discovery views.
Also, when I enter another page (such as /admin) the category remains selected. It would be better if no category was selected in this case.
I can see the fade on mobile now, but not an arrow / chevron. If possible this would be super helpful as the fade is pretty damn subtle:
Desktop:
Mobile:
Request #1 - UX
Hide the Navbar when scrolling in a topic. It all gets a bit busy!
Also, it might be better on desktop to have the Navbar located where the breadcrumb / tags are in that image instead of below them.
Request #2 - Feature
Could you please add a CSS class to each Nav Pill so it would be easy to hide some if needed?
I ask because I have a couple of (private) parent categories which are only parents in order to enable subcategories, and they clutter up the general navigation in an undesirable way.
I’ve hidden these for now using their href, but that is of course pretty dicey!
Request #3 - UX
An option to sort Sidebar Categories alphabetically.
As I’m implementing this, I’ve removed the parent categories from the default sidebar categories list. This means that my users now have just a list of 1-5 subcategories that are relevant to them.
However, they are a bit scrambled and in no logical order as the order on /Categories for subs doesn’t really make sense . It would be very helpful for these subcats to be alphabetic to help this!!
Hello! First of all, I would like to note that this is a very useful component of the topic and I want to thank you for the work you have done
On my instance, this component caused an error, I checked for compatibility with other plugins and theme components and at this point I have not yet found a conflict. Could the component itself be the cause?
Enabling this component distorts the presentation of the content.
Here’s a video:
In order to detect an error, you need to click on any post from the latest posts page /latest, the post will open in standard mode, then you need to go back to the latest posts page.
I’ve noticed that the text in the Head Categories Navbar suddenly changed to font-up-1 (whereas I think it was font-down-1 before). This is quite jarring and unpleasant, as it is the same as all the other nav pills.
I’ve over-ridden it with this CSS, which is much more pleasing:
// fixes text size of header navbar
.custom-categories-navbar .nav-pills>li>a {
font-size: var(--font-0);
}
I prefer font-0 actually as it is different enough and a bit easier to use.
to one another 
.
