Discourse Tab Bar for Mobile

@miss @MarcP Given that the component lets admins customize each tab, I can’t just hardcode a specific tab to do backward/forward navigation so we need a way to let admins decide which tab they want to act as a backward or forward button using the theme settings. This is a new feature that needs to be added to the component and I’d be happy to accept a PR for it. If you’re interested in working on this, please PM me before you start.


Hi, I made another PR to add an option to allow untrimmed URL to be able to match the tab destination setting.

For example, /latest?order=created and /latest will be treated as different tabs and receive icon color change on click when the option is on.

Would you like to take a look and let me know whether it’s mergable? thx in advance. :grinning:


I really like this!

It’s covering the Discourse Hub UI though, can that be fixed?


Hi, thank you for this theme component. I am currently using them on my website https://businesslab.vn. However, recently I have an idea about integrating “Toggle hamburger menu” and “Header dropdown toggle current user” inside this theme-component, this will make the display space in the header more minimalist, and users with only 1 hand operation can perform navigation to Tab bar (your theme-component). Hope you will be interested in this proposal.

1 Like

hello, this component is wonderful, congratulations on creating it! Is this the most current component there is? or is there a more modern component? I’m new to the forum

Is there a way for me to put a way on the last button so that when the person presses it, other buttons with icons or with icons and names appear for them to choose other options? Because I have more important options and I needed to put it, a way like this would be perfect, for example

that is, when the person clicks on the icon, other icons will appear for them to click on

@th21 @osama

1 Like

How do I make the tab bar fixed? Sometimes I scroll down and it disappears, I want to make it always visible!

I am trying to make one of the buttons go to user-portfolio with no luck.

Is this doable?

Edit: worked it out…

1 Like

Tab bar is overflow on chat box. Users can not chat with tab bar.
Could you fix this, please?

I can confirm the issue: it hides the text input.

A quick fix would be adding a margin under chat composer, not very beautiful but users should be able to toggle the input box.

I resize the tab bar as well so if anyone would like to use the css should use the original height of tab bar ( but I forget how much it is

.chat-composer__wrapper {
    margin-bottom: 35px 
1 Like

This seems to work, but it will leave a blank space when you scroll down.

(video recorded avec a margin-bottom of 49px, which is the tab bar height):

yes as I said it won’t be beautiful

1 Like

You should check with z-index, instead of margin
(Suppose that user never use tab when chatting)
By decrease z-index of tab-bar, it will be more beautiful

That’s why I didn’t use the z-index way and it’s also strange to have elements overlay, looks so buggy.

Could you disable scrolling on the wrapper without disabling scrolling of the chat itself?

@hoangphuctran93 Did you ever figure out how to call the hamburger menu to open? I want to call the new sidebar to open, which should be the same call.

1 Like

Though a team member created the component (wasn’t necessarily part of the team when they created it), it’s not official and will not be monitored and updated as much as official ones.

For this kind of component, I think it will benefit from pull requests if someone wants to give it a try to fix the existing issues.

1 Like

If anyone is using the assigned plugin this URL works:


What do we enter into the box in settings to add a new font awesome icon?

DId anyone manage to get this working? In the wake of the Ai Chatbot function, users might need to be alerted when the bot replies and make the unread messages icon carry a badge as per social media industry standards for UI/UX.