# Discourse Tab Bar for Mobile

**URL:** https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696
**Category:** Theme component
**Created:** [8 december 2017 om 18:05 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696 "2017-12-08T18:05:34Z")
**Posts on this page:** 20
**Page:** 4

<div class="post-metadata">

### Author: ![Firepup650](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/firepup650/32/465200_2.png) [@Firepup650](https://meta.discourse.org/u/Firepup650)
#### Post date: [30 juni 2023 om 18:33 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/160 "2023-06-30T18:33:14Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Drew-ART](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@Drew-ART](https://meta.discourse.org/u/Drew-ART)
#### Post date: [12 september 2023 om 20:34 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/161 "2023-09-12T20:34:23Z")

</div>

@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.

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [12 september 2023 om 21:23 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/162 "2023-09-12T21:23:26Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Drew-ART](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@Drew-ART](https://meta.discourse.org/u/Drew-ART)
#### Post date: [14 september 2023 om 20:24 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/164 "2023-09-14T20:24:49Z")

</div>

If anyone is using the assigned plugin this URL works:

my/activity/assigned

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

---

<div class="post-metadata">

### Author: ![Mr.X\_Mr.X](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mr.x_mr.x/32/126610_2.png) [@Mr.X\_Mr.X](https://meta.discourse.org/u/Mr.X_Mr.X)
#### Post date: [13 november 2023 om 23:54 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/165 "2023-11-13T23:54:07Z")

</div>

> [@Osama](#):
>
> Yes these are the correct properties that we need to consume, but with Discourse being an Ember application, we typically don’t subscribe to DOM events to update the UI. Instead, we should use what Ember calls [‘computed’ properties](https://guides.emberjs.com/v3.3.0/object-model/computed-properties/).
> 
> The component already defines a computed property [here](https://github.com/OsamaSayegh/discourse-tab-bar-theme/blob/c05adce3274ffee821eadac8f81ffb54b85e5045/mobile/head_tag.html#L74-L85), so you can use that as an example. Once you’ve defined your computed property that determines whether or not the notifications badge should be displayed (based on the `currentUser.unread_high_priority_notifications` etc. properties), you will need to use your computed property in the Handlebars template in the same link at the bottom.
> 
> Note: implementing this feature in a separate component is tricky, so everything I said here assumes that you’re implementing this in the component itself, not a separate component.

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.

---

<div class="post-metadata">

### Author: ![Damian\_Boon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/damian_boon/32/574032_2.png) [@Damian\_Boon](https://meta.discourse.org/u/Damian_Boon)
#### Post date: [29 juni 2024 om 21:28 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/166 "2024-06-29T21:28:02Z")

</div>

this now breaks the site, not sure why

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [30 juni 2024 om 00:27 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/167 "2024-06-30T00:27:55Z")

</div>

The original repository received recent updates to fix deprecations and make other improvements. It’s not currently available in @th21 's fork.

---

<div class="post-metadata">

### Author: ![Zup](https://avatars.discourse-cdn.com/v4/letter/z/c37758/32.png) [@Zup](https://meta.discourse.org/u/Zup)
#### Post date: [23 oktober 2024 om 18:48 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/168 "2024-10-23T18:48:31Z")

</div>

Where is the original repository?

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [23 oktober 2024 om 21:16 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/169 "2024-10-23T21:16:32Z")

</div>

You can see any original repository at the top of the topic. Here is what you’re looking for: [GitHub - OsamaSayegh/discourse-tab-bar-theme · GitHub](https://github.com/OsamaSayegh/discourse-tab-bar-theme).

---

<div class="post-metadata">

### Author: ![Zomb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zomb/32/93881_2.png) [@Zomb](https://meta.discourse.org/u/Zomb)
#### Post date: [10 november 2024 om 03:22 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/170 "2024-11-10T03:22:15Z")

</div>

Looks great! Do wish there were back/forward buttons.

---

<div class="post-metadata">

### Author: ![MihirR](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mihirr/32/475158_2.png) [@MihirR](https://meta.discourse.org/u/MihirR)
#### Post date: [2 januari 2025 om 17:17 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/171 "2025-01-02T17:17:40Z")

</div>

Is there some style error on the Chat or DM page? Like there seems an empty space there and there is no tab bar option there.

---

<div class="post-metadata">

### Author: ![Drew-ART](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@Drew-ART](https://meta.discourse.org/u/Drew-ART)
#### Post date: [6 februari 2025 om 16:44 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/172 "2025-02-06T16:44:04Z")

</div>

If i created a couple of forks of this and reinstalled them, would it be possible to define which url’s on my site each one loads?

For example

- ‘load/exclude on url: /t/’
- ‘load/exclude on url: /c/’
- ‘load/exclude on url: /c/puppies’

The goal is to creating a tab-bar that changes icons and links for 3 different areas of the site, bringing to users the actions that i want users to take in each area.

* * *

I wonder if the Kanban plugin function ‘Display categories’ might have some code that could be repurposed to enable that.

`A list of categories where the "Board" button should appear. If left blank, it will be shown everywhere. Use @ to denote the top level view.`

Alternatively, perhaps the `isHomepage` getter could be modified to check for other pages too?

> [@Add custom content that only appears on your homepage](https://meta.discourse.org/t/add-custom-content-that-only-appears-on-your-homepage/131415):
>
> A very common situation you’ll find yourself in as a theme developer is the need to create content that only shows on the homepage of your community. You might add some HTML to the “After Header” section of your theme, which will then appear on every page. You can jump through some hoops in CSS to hide this everywhere except the homepage… but instead let’s use a Discourse theme to create a component with content that is only visible on your homepage. If you’re unfamiliar with Discourse themes …

---

<div class="post-metadata">

### Author: ![Osama](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/osama/32/98013_2.png) [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [6 februari 2025 om 17:38 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/173 "2025-02-06T17:38:46Z")

</div>

> [@Drew-ART](#):
>
> If i created a couple of forks of this and reinstalled them, would it be possible to define which url’s on my site each one loads?
> 
> For example
> 
> - ‘load/exclude on url: /t/’
> - ‘load/exclude on url: /c/’
> - ‘load/exclude on url: /c/puppies’
> 
> The goal is to creating a tab-bar that changes icons and links for 3 different areas of the site, bringing to users the actions that i want users to take in each area.

That’s not possibly by simply installing multiple copies of the component – you’d need to fork the component and modify it to support your use case.

---

<div class="post-metadata">

### Author: ![Drew-ART](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@Drew-ART](https://meta.discourse.org/u/Drew-ART)
#### Post date: [6 februari 2025 om 17:40 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/174 "2025-02-06T17:40:55Z")

</div>

Yes, that’s what i’m suggesting. I’m asking whether that is a sensible route to go and if its likely to work with the lovely component you’ve built.

---

<div class="post-metadata">

### Author: ![Osama](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/osama/32/98013_2.png) [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [6 februari 2025 om 17:45 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/175 "2025-02-06T17:45:53Z")

</div>

> [@Drew-ART](#):
>
> I’m asking whether that is a sensible route to go and if its likely to work with the lovely component you’ve built.

You know better the needs of your site/community, so if you feel like that would be an improvement for your site or it would solve a problem, you’re certainly more than welcome to fork the code and modify it. That’s the beauty of open source ❤

---

<div class="post-metadata">

### Author: ![cmdntd](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cmdntd/32/192008_2.png) [@cmdntd](https://meta.discourse.org/u/cmdntd)
#### Post date: [11 juni 2025 om 17:40 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/176 "2025-06-11T17:40:52Z")

</div>

I can not set a `link` of anchor like `#intro`  
Could you check for this, pls?

---

<div class="post-metadata">

### Author: ![WorldIsMine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/worldismine/32/455660_2.png) [@WorldIsMine](https://meta.discourse.org/u/WorldIsMine)
#### Post date: [13 juni 2025 om 15:24 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/177 "2025-06-13T15:24:14Z")

</div>

> [@Tom\_Eagle](#):
>
> ~~I am trying to make one of the buttons go to user-portfolio with no luck.~~
> 
> ~~Is this doable?~~
> 
> Edit: worked it out…
> 
> ```plaintext
> my/activity/portfolio
> 
> ```

Can I see your exact setting? Seems it’s not working for me.

---

<div class="post-metadata">

### Author: ![eisammy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eisammy/32/528804_2.png) [@eisammy](https://meta.discourse.org/u/eisammy)
#### Post date: [14 oktober 2025 om 22:56 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/178 "2025-10-14T22:56:30Z")

</div>

![image](https://global.discourse-cdn.com/meta/original/4X/7/5/4/754231aa6c3d7f9b0ed4bd0a5572405464acec7c.png)  
 ![image](https://global.discourse-cdn.com/meta/original/4X/6/a/1/6a11d12378cd3bfce696405463e44fe50823aad3.jpeg)

Reason:

> [@Discourse Tab Bar for Mobile](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696):
>
> GitHub repository: Screenshots Installation Follow the instructions in this #howto topic: Customization See the [readme](https://github.com/OsamaSayegh/discourse-tab-bar-theme/blob/master/README.md) file in the theme’s GitHub repository. Ideas to improve this theme are very welcome slightly_smiling_faceUpdate 24/12/2018: You no longer need to overwrite any code in order to customize this theme. It’s now shipped with theme settings that allow customization for each of the 6 tabs with ability to disable any tab. See the [readme](https://github.com/OsamaSayegh/discourse-tab-bar-theme/blob/master/README.md) file for detai…

I had fix this before but when I update whole thing this happened again.

---

<div class="post-metadata">

### Author: ![eisammy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eisammy/32/528804_2.png) [@eisammy](https://meta.discourse.org/u/eisammy)
#### Post date: [10 november 2025 om 08:23 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/181 "2025-11-10T08:23:34Z")

</div>

Nevermind I did

> **[Sammy / Discourse Tab Bar Theme · GitLab](https://gitlab.com/eisammy/discourse-tab-bar-theme)**
>
> Barra de abas do Discourse para celular

---

<div class="post-metadata">

### Author: ![cmdntd](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cmdntd/32/192008_2.png) [@cmdntd](https://meta.discourse.org/u/cmdntd)
#### Post date: [28 juli 2026 om 17:10 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/182 "2026-07-28T17:10:05Z")

</div>

It has notice in new core update:

Theme contains code which needs updating. (id:discourse.static-viewport-initialization)

> [@Designing for Different Devices (Viewport Size, Touch/Hover, etc.)](https://meta.discourse.org/t/designing-for-different-devices-viewport-size-touch-hover-etc/367810):
>
> This document outlines the APIs used to adapt Discourse’s user interface for different devices. Viewport Size The most important characteristic to consider is the viewport size. We design “mobile first” and then add customizations for larger devices as needed. The breakpoints we use are: Breakpoint Size Pixels (at 16px body font size) sm 40rem 640px md 48rem 768px lg 64rem 1024px xl 80rem 1280px 2xl 96rem 1536px To use these in an SCSS file, add @use "lib/viewport"; at the t…

[Vorige pagina](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696.md?page=3)
