What Are Nav Slots?
A nav slot is a designated position within the navigation chrome where you can inject a custom component. Slots are structural placeholders — they exist regardless of whether you fill them, and they expand or collapse to fit whatever you place inside them.
Slots serve two main purposes:
Injecting persistent UI into the navigation frame: a logo in the drawer header, a user avatar in the tab bar corner, a search input at the top of a sidebar.
Per-item customisation: adding badges to specific tabs, replacing the default tab icon with a custom component, or adding a suffix icon to drawer items.
Note: Slots let you extend the platform's standard navigation chrome. For fully custom navigation (built entirely from your own components with no platform chrome), use the Custom navigation style instead (App Settings → Navigation → Appearance → Style → Custom). Slots are for targeted additions within the standard layout, not complete replacements.
Available Slots by Navigator Type
Tab Bar Slots
| Slot | Location | Scope | Description |
tabIcon | Inside each tab, replacing the default icon | Per-tab | Replace the platform-rendered icon with a fully custom component. Receives the tab's isActive boolean as a binding so you can style the active/inactive states yourself. Use when you need animated icons, custom SVGs, or images as tab icons. |
tabLabel | Inside each tab, replacing the default label | Per-tab | Replace the tab's text label with a custom component — e.g. a styled text component, a label with a status indicator, or a combined icon+text layout. Receives isActive binding. |
tabBadge | Top-right corner of a tab icon | Per-tab | A small badge overlay on a tab icon — typically used for notification counts, unread message counts, or alert indicators. Bind to a data source for dynamic counts. The platform renders a default badge style (red circle with number) when bound to a number greater than 0; use this slot to supply a custom badge component instead. |
leftAction | Left side of the header bar above the tab bar | App-wide | Action icon(s) on the left side of the header bar — typically a hamburger menu, a back arrow, or a logo. Available when the tab bar has an accompanying header bar. |
rightAction | Right side of the header bar above the tab bar | App-wide | Action icon(s) on the right side of the header bar — search, notification bell, overflow menu. Multiple components can be placed in the right action slot; they stack horizontally. |
Drawer Slots
| Slot | Location | Scope | Description |
headerSlot | Top of the drawer, above the item list | App-wide | Content placed at the very top of the drawer panel, above all navigation items. Common uses: brand logo, app name, and version number; user avatar and display name; a search input for filtering drawer items. The slot height expands to fit its content. |
footerSlot | Bottom of the drawer, below the item list | App-wide | Content anchored to the bottom of the drawer regardless of list scroll position. Common uses: signed-in user profile card with a Sign Out button; app version and legal links; a feedback/help button. The footer is always visible even when the item list is long and scrollable. |
itemIcon | Icon position of a specific drawer item | Per-item | Replace a specific item's icon with a custom component. Receives isActive binding. Use for animated or state-aware icons on specific high-priority items. |
itemSuffix | Right side of a specific drawer item, after the label | Per-item | Content appended to the right of a drawer item's label. Common uses: a badge count (unread notifications), a keyboard shortcut hint, a "New" label for recently added features, or a chevron indicator for items that open a sub-menu. |
Configuring Slots
Slot configuration is accessed through App Settings → Navigation → Slots. The workflow differs slightly between app-wide slots and per-item slots.
Configuring App-Wide Slots
Open the Slots panel: In App Settings → Navigation, switch to the Slots tab. You will see a panel listing all available slot positions for your current navigator type.
Expand the slot you want to fill: Click the slot name (e.g. Drawer Header). A canvas area appears showing the slot's available space and current content (empty by default).
Add a component to the slot: Drag a component from the component library into the slot canvas, or click Use Template to insert a pre-built slot template (e.g. "User Profile Card" for the drawer footer slot).
Configure the component: Select the component and use the standard properties panel to configure it. Data bindings work normally — you can use
{{user.displayName}},{{notifications.unreadCount}}, or any other app binding.
Configuring Per-Item Slots
Per-item slots (tabBadge, tabIcon, itemIcon, itemSuffix) are configured in the Content tab of Navigation settings, within each individual nav item's configuration:
In the Content tab, click the nav item you want to customise.
In the item configuration panel, scroll to the Custom Slots section.
Expand the slot you want to fill (e.g. Badge).
Toggle Use custom slot on. A mini canvas appears for this item's slot.
Drag a component in or use a template. The badge template automatically renders a round red chip with a number label.
Ordering Tabs and Drawer Items
The order of tabs in a tab bar and items in a drawer determines the order they appear in the rendered navigation menu. There are two ways to control order:
Drag to Reorder in the Pages Panel
The Pages panel hierarchy is the primary source of ordering for navigation items that are automatically generated from pages. Pages and folders listed higher in the panel hierarchy appear first in the navigation. To reorder:
Open the Pages panel.
Hover over a page or folder until the drag handle (six dots) appears to the left of the name.
Drag the page or folder to the new position in the hierarchy.
The navigation menu updates to reflect the new order in Preview mode.
Reorder in the Navigation Content Tab
Navigation items that are manually created (not auto-generated from pages) are ordered directly in the Content tab:
Open App Settings → Navigation → Content tab.
In the primary menu items list, drag items up or down to reorder them.
Changes take effect immediately in the builder preview.
Tip: In the Appearance tab's Item Order section, each navigation item has an eye icon toggle. Toggling it off hides the item at the current breakpoint without removing it from other breakpoints. This lets you show 5 tabs on mobile and 8 items in a sidebar on desktop from the same navigation configuration.
Dynamic Badge Counts
The most common use of the tabBadge and itemSuffix slots is displaying live notification or message counts. The platform renders the default badge style when you bind the badge value to a number — no custom slot component is needed for simple counts.
To add a badge count to a tab or drawer item:
Select the nav item in the Content tab.
Find the Badge field in the item configuration panel.
Bind it to a data expression that resolves to a number:
{{notifications.unreadCount}}The badge renders automatically: hidden when the value is 0 or null, showing the number when it is 1–99, showing "99+" when 100 or above.
📄 Example — Multiple badge sources
// Inbox tab badge: total unread messages Messages tab → Badge: {{ inbox.unread }} // Tasks tab badge: only overdue tasks (adds urgency) Tasks tab → Badge: {{ tasks.filter(t => t.isOverdue).length }} // Notifications icon in header right action slot Notifications → Badge: {{ notifications.unread > 0 ? notifications.unread : null }}
Warning: Badge counts render on every page — the data source powering them is queried continuously as the user navigates. Use dedicated count endpoints (e.g. GET /notifications/count) rather than fetching full notification objects and computing the count client-side. This reduces payload size and query time.