# F NAV - Mobile Navigation Tabs
**URL:** https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277
**Category:** Theme component
**Tags:** mobile
**Created:** [December 13, 2024, 1:12pm UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277 "2024-12-13T13:12:16Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [December 13, 2024, 1:12pm UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/1 "2024-12-13T13:12:16Z")
| | | |
| --- | --- | --- |
| ℹ | **Summary** | F NAV - Mobile Navigation Tabs |
| 👓 | **Preview** | [Theme Creator](https://discourse.theme-creator.io/theme/Don/f-nav-component) |
| 🛠 | **Repository** | [GitHub - VaperinaDEV/f-nav-for-mobile: F NAV - Mobile Navigation Tabs · GitHub](https://github.com/VaperinaDEV/f-nav-for-mobile) |
| ❤ | **Found it useful?** | [\> ./support --coffee](https://meta.discourse.org/u/don) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
Hello 👋
Before, I have created a #Development [topic](https://meta.discourse.org/t/f-nav-theme-component-concept/340226) for it as a theme component concept and now this is in a state to be a #Customization > Theme component.
> ⚠ **Please be sure to test it before use in live**.
Some info here about the component: [F NAV - Theme component concept](https://meta.discourse.org/t/f-nav-theme-component-concept/340226)
* * *
**About the theme component.** I was read so much posts about it would be wonderful to make the [Discourse Tab Bar for Mobile](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696) more dynamic and add the ability to handle e.g. notifications etc… F-NAV can do this and more…
## Header
It hides the hamburger, user menu, search and chat and adds a profile (avatar) menu button which contains the default user menu profile tab content.
### Settings
It also contains a setting where you can add custom items before Log Out item.
It contains three fields where you can easily add custom items.
There are some settings for show/hide the default header icons which is useful when you don’t want to place the exact tab in F NAV so it will shown on header.
## Tabs
It is possible to associate different functions with tabs. These functions allow each tab to change dynamically.
Such changes include:
### Functions
**home**
- switches the home tab icon on topic routes to left arrow which add a go back function
- adds new or unread topic indicator dot
* * *
**hamburger** (opens the hamburger menu)
* * *
**multi**
> **multi tab**
>
> Multi tab is change automatically to message tab if chat is not enabled or user turn it off in
> user settings.
>
> The notifications bubble changes as it is urgent or not.
>
> Multi tab urgent notifications are green and looks like this. 🔽
>
> 
> Expanded
> 
>
> Personal message is always green but chat can be blue as originally for example unread channel message notification.
>
> 
>
> Expanded
>
> 
>
> Single notification
>
> 
* * *
**message**
- adds message button with notifications and clicking of it opens a messages modal for quick look
* * *
**chat**
- adds chat button with it’s functions
* * *
**notificationToRoute**
- if do not disturb active the bell icon will change to bell-slash icon and the dnd until time is appears
- redirects to profile notifications page bypass the notification menu
* * *
**notificationMenu**
- if do not disturb active the bell icon will change to bell-slash icon and the dnd until time is appears
- opens notification menu
* * *
**search**
- redirects to context base `/search` page
* * *
### Settings
I try to make the settings simple as possible.
It will contains four fields.
- **name** : This is just for easier identify the tab in setting.
- **icon** : Adds icon to the tab. Note: If you select a function there might be icons which not overridable with this setting.
- **destination** : Adds destination for your custom tab. Note: If you select a function that will handle the destination so you can leave it empty. The component handle the `/my/...` destinations automatically convert to `/u/username/...` so the tabs active status can be added correctly.
- **function** : Choose a function to the tab.
Admins can simply create/remove/change tabs and select from one of the functions or add a custom destination to the tab.
Functions 🔽
E.g. adding topic creation tab will simply looks like this.
* * *
**Credit** : [Discourse Tab Bar for Mobile](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696) and thanks for everyone the feedbacks in [F NAV - Theme component concept](https://meta.discourse.org/t/f-nav-theme-component-concept/340226) topic. ❤
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [December 13, 2024, 1:31pm UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/2 "2024-12-13T13:31:44Z")
This is awesome and legit should be the default behavior and will save my thumb from trying to reach too often the far top screen of my 📱.
I’m not a fan of the prominent “online” toggle as I think most people don’t need to change this setting often, I guess most users choose to opt-out of their online presence once and for all so not sure of the constant reminder that this option exists.
You’ve apparently made lot of very useful navigation modification theme components. I’d like to use some, but how much do you see yourself maintaining all of this in the long run? I tend very much to use only #official theme components to ensure reliability.
I didn’t see the original tab bar official theme component, so I’ll have a look at it.
---
### Author:  [@ozkn](https://meta.discourse.org/u/ozkn)
#### Post date: [December 13, 2024, 1:42pm UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/3 "2024-12-13T13:42:01Z")
Thanks for the component @don I’ve been here for a long time you’re really doing great work.
---
### Author:  [@Monikas](https://meta.discourse.org/u/Monikas)
#### Post date: [December 14, 2024, 6:18am UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/4 "2024-12-14T06:18:34Z")
> [@FKB Pro - Social theme](https://meta.discourse.org/t/fkb-pro-social-theme/234323/357):
>
> This one I’m not sure if it’s a bug or not because I have too many components Well I’d better give feedback on it
This should be a bug
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [December 14, 2024, 6:21am UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/5 "2024-12-14T06:21:03Z")
Ah thanks, this is FKB theme related. I’ll update the theme.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [December 14, 2024, 8:17am UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/6 "2024-12-14T08:17:36Z")
Here is the fix: [Compatibility: Adds support for F NAV theme component by VaperinaDEV · Pull Request #51 · VaperinaDEV/fkb-pro-theme · GitHub](https://github.com/VaperinaDEV/fkb-pro-theme/pull/51)
Please update the FKB theme and enable this new setting.
---
### Author:  [@ozkn](https://meta.discourse.org/u/ozkn)
#### Post date: [December 14, 2024, 5:20pm UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/7 "2024-12-14T17:20:14Z")
> **[Bell Outline Icon (Classic Regular) — Free SVG Download | Font Awesome](https://fontawesome.com/icons/bell?f=classic&s=regular)**
>
> Download the Bell outline icon as a free SVG or PNG. A lightweight Classic Regular style icon for web and app projects.
Hello @don, how can I use fa-regular icons like in the picture? I did some research and couldn’t find any information on how to do it after switching to Fontawesome 6.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [December 15, 2024, 11:30am UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/8 "2024-12-15T11:30:13Z")
Hello 👋 It should work with `far-bell`. I had plans to make it regular to solid when tab is active, I’ll check this but if I remember correctly the house icon only have solid in free version. 🤔
---
### Author:  [@ozkn](https://meta.discourse.org/u/ozkn)
#### Post date: [December 15, 2024, 1:09pm UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/9 "2024-12-15T13:09:20Z")
Thanks, I solved my problem. @Don
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [December 15, 2024, 1:53pm UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/10 "2024-12-15T13:53:52Z")
The home icon, that changes to back button when open a topic. Why, we can use swaiping for that (like when returning to home screen of the Hub 😏). My users were complaining quite lot about that, because know they have to reach logo for that (1st world problem, I know 😂)
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [December 15, 2024, 4:06pm UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/11 "2024-12-15T16:06:34Z")
I think we can add it to a function I am just thinking of where to place this. This can be a single tab and you can add it the navigation which only shows in DiscourseHub.
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [December 15, 2024, 4:39pm UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/12 "2024-12-15T16:39:20Z")
Actually DiscourseHub works just fine with swiping down. I just didn’t know that.
That question of home/back button is bigger because I have to explain it to others.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [December 15, 2024, 5:26pm UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/13 "2024-12-15T17:26:31Z")
> [@Jagster](#):
>
> That question of home/back button is bigger because I have to explain it to others.
The back button is only activate in topics to makes the back navigation easier between topics. It’s from the home function which you can turn off and then this will keep the home destination.
The settings cannot be reorder yet and if you have an existed selection you cannot clear it but I add a new function `none` which will be the same behaviour like you leave the function field empty. This way you don’t have to recreate the whole navigation tabs.
This is how it should be if you want to disable the back button and keep the home everywhere.
[https://github.com/VaperinaDEV/f-nav-for-mobile/commit/d1e94a0f7dec92437c34bfa70122e18e68906edb](https://github.com/VaperinaDEV/f-nav-for-mobile/commit/d1e94a0f7dec92437c34bfa70122e18e68906edb)
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [December 21, 2024, 7:08am UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/14 "2024-12-21T07:08:10Z")
Fantastic as always. I have to agree from the quick preview on theme creator. This really should be package in core with a toggle for classic mobile and Improved Mobile.
I can see this opening things like longer banner site logo. Cleaner option for extras in the header like local selector and more. Very very nice as always Don!
---
### Author:  [@MihirR](https://meta.discourse.org/u/MihirR)
#### Post date: [January 6, 2025, 5:46am UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/16 "2025-01-06T05:46:48Z")
The Pencil Icon and the nav topics are collapsing with the nav bar.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [January 6, 2025, 5:54am UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/17 "2025-01-06T05:54:00Z")
> [@F NAV - Mobile Navigation Tabs](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/6):
>
> Here is the fix: [Compatibility: Adds support for F NAV theme component by VaperinaDEV · Pull Request #51 · VaperinaDEV/fkb-pro-theme · GitHub](https://github.com/VaperinaDEV/fkb-pro-theme/pull/51) Please update the FKB theme and enable this new setting. [Screenshot 2024-12-14 at 9.17.02]
---
### Author:  [@CAX.DO](https://meta.discourse.org/u/CAX.DO)
#### Post date: [January 18, 2025, 12:10pm UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/18 "2025-01-18T12:10:49Z")
Hi Don. Thank you for your awesome work. I like it.
I have a question. After I click on the Hamburger or Notification, sometimes I don’t need to take any further actions. At this time, I need to go back to the article list. However, I can only close the Hamburger or Notification by clicking on the blank page. This may lead to accidentally clicking on the avatar or reply.
To give another simple example, when I am on the chat page and need to go back to the home page, I have to click the back button in the upper left corner, which is actually not user-friendly on mobile devices.
So, is it possible to keep the menu bar always at the top?
I hope my description can be understood.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [January 18, 2025, 1:52pm UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/19 "2025-01-18T13:52:19Z")
Hi Max 👋
Can you make some screenshot / screen record about the issue?
> [@CAX.DO](#):
>
> when I am on the chat page and need to go back to the home page, I have to click the back button in the upper left corner
On `/chat` we hide the navigation and use the _default_ chat header. I am not sure that worth to display the nav on chat because that can cause issues on different browsers maybe but I will check this.
---
### Author:  [@CAX.DO](https://meta.discourse.org/u/CAX.DO)
#### Post date: [January 18, 2025, 2:58pm UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/20 "2025-01-18T14:58:28Z")
Hi Don 😃
Thank you for your reply.
Please refer to the screenshots below. The first two screenshots mean that when I want to close the Hamburger or Notification, I can only click on the yellow area. The problem is that it’s easy to accidentally click on the article or avatar.
The third screenshot means that I have to click the back button in the upper left corner to leave the chat interface.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [January 18, 2025, 3:15pm UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/21 "2025-01-18T15:15:29Z")
Thanks for the clarification 😊
> [@CAX.DO](#):
>
> The first two screenshots mean that when I want to close the Hamburger or Notification, I can only click on the yellow area. The problem is that it’s easy to accidentally click on the article or avatar.
Yeah, I see. The issue happens here is not the component but a core issue when you have enabled the reduce motion setting on your device. Is that enabled on your device?
When the reduce motion is turned off. The `header-cloak` (dark area behind the menu) is blocking the click action.
When I enable it on my device, it won’t block the user click.
If this is the case, you can safely close the menus with swipe gestures too.
I think I have a topic about this issue somewhere 🤔
> [@CAX.DO](#):
>
> The third screenshot means that I have to click the back button in the upper left corner to leave the chat interface.
That is the default chat header.
I will check if we can enable the nav there too.
[Next page](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277.md?page=2)