# 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:** 1
**Showing post:** 73

<div class="post-metadata">

### Author: ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [October 18, 2025, 10:44am UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/73 "2025-10-18T10:44:02Z")

</div>

Quick update about my Fork of “F-NAV for Mobile” with Back Button, Custom Submenu, and Visibility Controls. Works best with 3.6beta1

### Why this fork?

- Provide a header “Back” button on topic pages that mirrors common mobile app UX
- Offer a “customMenu” tab type that opens a configurable submenu (ideal for linking to multiple destinations; we use it to add custom pre-populated “New Topic” links)
- Add group-based visibility to tabs and menu items, so you can show certain items to staff only, etc.
- Small fixes with some deprecations and polishing of styles/accessibility

> **Summary about newly added features here**
>
> - Header Back Icon (optional)
> - Replaces the header home logo with a back arrow on topic pages
> - Behavior: go back if there’s history, otherwise route to “/”
> - Toggle with setting: `header_back_icon_enabled`
> 
> - Custom Submenu tab type
> - New f\_nav\_tabs function: customMenu
> - New setting: f\_nav\_submenu\_items
> - Configure menu items with label and URL (optional icon)
> - Great for quick access to multiple pages from a single tab
> 
> - Group‑based visibility controls
> - Tabs, submenu items, and profile\_extra\_items can be limited to selected groups
> - Behavior:
> - Empty groups =\> visible to all
> - If groups set =\> only members of at least one selected group can see
> - Anonymous users can’t see restricted items
> 
> - Optional: Hide nav bar on topic pages
> - Toggle with setting: hide\_nav\_in\_topic
> 
> - Zipped “build” artifacts and testing docs
> - Convenience build artifacts (v1–v5) under builds/
> - TESTING\_GUIDE.md and TEST\_RESULTS.md documenting manual validation
> 
> ### Enhancements to existing features
> 
> - F‑NAV items and tabs
> - Adds visibleTabs getter to respect group visibility
> - Integrates the new CustomSubmenu component into FNavItem flow
> 
> - Header avatar/profile menu
> - Mobile view detection moved into the component, improving behavior and resolving warnings
> - Profile extra items now support group‑based visibility
> 
> - Styling and accessibility
> - New SCSS for the custom submenu and the back icon
> - Consistent hover/active/focus-visible states
> - Consistent border‑radius with core variables; refined padding/spacing (e.g., back button padding set to 0)
> 
> ### Bug fixes and maintenance
> 
> - Resolve site.mobileView deprecation warnings by moving checks from initializers into component rendering
> - Fix a rendering edge case by moving a function out of the block
> - Minor polish to match Discourse header behaviors (hover/active states, opacity transitions)
> - Small CSS tidy-ups (e.g., ensure back button padding is zero, prevent accidental sizing shifts)
> 
> * * *
> 
> ## High‑level comparison (Original vs Fork)
> 
> - Original (main): F‑NAV mobile tabs + chat optional import; no back button or custom submenu
> - Fork (feat/home-logo-arrow-back):
> - Adds header back icon feature with routing fallback
> - Introduces “customMenu” tab function with configurable submenu items
> - Adds group‑restricted visibility for tabs, submenu items, and profile items
> - Optionally hides the F‑NAV on topic pages
> - Improves a11y and consistency of interaction states
> - Provides testing docs and packaged builds

**Notes:**

- This component targets recent Discourse versions that support the Discourse Plugin API level 1.14+ (as indicated in the initializers)
- If you rely on group‑based visibility, ensure your groups and memberships are configured first

* * *

Word of warning: Please test with caution as I am not a coder, and the TC was made and tested entirely with AI.

Shoutout to Don for this great component, it’s a fantastic addition to Discourse UX/UI! ❤

---

_[View the full topic](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277)._