Navigation Tabs
The bottom navigation bar is the primary way members move around the app. You can show up to 5 tabs, reorder them, rename labels, and choose icons.
Go to Settings → Mobile App → Design to access the Navigation Bar editor.
Available Tabs
There are 9 predefined tabs. Each has a fixed ID that cannot be renamed internally, but you can change the visible label.
| Tab ID | Default Label | Default Icon | Default Visible |
|---|---|---|---|
feed | Feed | Newspaper | Yes |
spaces | Spaces | LayoutGrid | Yes |
notifications | Alerts | Bell | Yes |
me | Me | User | Yes |
events | Events | Calendar | No |
courses | Courses | GraduationCap | No |
wallet | Wallet | QrCode | No |
directory | Directory | Users | No |
jobs | Jobs | Briefcase | No |
The first 4 tabs (Feed, Spaces, Alerts, Me) are visible by default. The remaining 5 are hidden until you enable them.
Constraints
- Max 5 visible tabs — the visibility toggle is disabled once 5 tabs are already shown.
- One primary tab — the primary tab is the default landing screen when the app opens. If you hide the current primary tab, the primary designation is automatically cleared.
- Feed, Spaces, Notifications, and Me tabs are always available (cannot be removed from the system), but you can hide them from the bottom nav.
Configuring Each Tab
Each row in the Navigation Bar editor has the following controls:
| Control | Description |
|---|---|
| Icon preview | Live miniature of the selected icon |
| Label field | Text shown below the icon; max 50 characters |
| Icon picker | Choose from 15 Lucide icons (see table below) |
| Header Style | Controls the header appearance when this tab is active |
| Reorder (up/down) | Swap this tab's position with the one above/below |
| Visibility toggle | Show or hide this tab in the bottom nav |
| Make Primary (star) | Set this tab as the default landing screen |
Available Icons
| Icon | Name |
|---|---|
| Newspaper | Newspaper |
| LayoutGrid | LayoutGrid |
| Bell | Bell |
| User | User |
| Calendar | Calendar |
| GraduationCap | GraduationCap |
| QrCode | QrCode |
| Users | Users |
| Briefcase | Briefcase |
| Home | Home |
| Heart | Heart |
| MessageCircle | MessageCircle |
| Search | Search |
| Settings | Settings |
| ShoppingBag | ShoppingBag |
Header Styles
| Value | Description |
|---|---|
home | Home-style header (used by Feed by default) |
avatar-notification | Shows member avatar and notification icon |
community-logo | Displays the community logo in the header |
page-title | Shows the tab label as the page title |
none | No header (used by Me tab by default) |
The phone mockup on the left updates instantly as you make changes — no save required to see the preview.
Reordering Tabs
- In the Navigation Bar editor, locate the tab you want to move.
- Click the up or down arrow to swap its position with the adjacent tab.
- The mockup reflects the new order immediately.
Space Mapping (Directory and Jobs Tabs)
When the Directory or Jobs tab is visible, you can control which space they load.
| Tab | Dropdown option | Default |
|---|---|---|
| Directory | Select a directory space | Auto-detect (first directory space) |
| Jobs | Select a jobs space | All jobs (across spaces) |
If no directory spaces exist, the dropdown shows: "No directory spaces found. Create one in Space settings first."
Space mapping is saved as part of the full mobile app config.
Route Visibility Toggles
In addition to the bottom nav, you can control whether optional features are accessible at all within the app. These toggles are in the Settings tab (not the Design tab).
| Feature | Default | Notes |
|---|---|---|
| Events | ON | Hides the Events tab and routes |
| Courses | ON | Hides the Courses tab and routes |
| Directory | ON | Hides the Directory tab and routes |
| Job Board | ON | Hides the Job Board tab and routes |
| News | ON | Hides the News tab and routes |
Feed, Spaces, Notifications, and Profile are always visible — no toggle is provided for them.
Hiding a feature via route visibility is separate from hiding the bottom nav tab. For a feature to be fully inaccessible, disable its route visibility toggle.
Next Steps
- Push Notifications — Set default notification preferences per category
- Preview and Publish — Preview your nav layout in the PWA Simulator