Navigation Components
Check out this quick two minute video to learn the ins & outs of creating custom navigation in Adalo with different components.
Overview
Navigation is how your users move between screens. Adalo provides five pre-built navigation components, each designed for a different layout and use case. You can also build fully custom navigation using basic components like rectangles, text, and images.
This page covers the fundamentals of navigation and best practices that apply regardless of which component you use. Each component has its own setup guide linked below.
Pre-Built Navigation Components
Side Navigation β A vertical panel that slides in from the side. Useful for apps with many destinations or desktop-style layouts.
Top Navigation β A horizontal bar at the top of the screen. Works well for organizing content within a section or as a complement to bottom navigation.
Bottom Navigation β A horizontal bar fixed to the bottom of the screen. The most common navigation pattern for mobile apps. Best for 3β5 primary destinations.
App Bar β A top bar that typically holds a screen title, back button, and action icons. Used for hierarchy and context rather than primary navigation.
Tab Bar (Legacy) β An older version of bottom tab navigation. Still functional, but newer apps should use Bottom Navigation instead.
Before You Begin
Your app should have at least two screens to navigate between.
Decide which screens are your primary destinations β these will become your navigation tabs.
Plan your tab order: most important items go on the left (or top), least important on the right (or bottom).
How Navigation Works in Adalo
The Core Pattern
Regardless of which component you choose, navigation setup follows the same basic steps:
Drag the component onto your screen.
Configure each tab β set the icon, label, and link for each destination.
Set link transitions to None. Navigation should feel like switching tabs, not moving to a new page.
Copy and paste the component onto your other main screens.
Update the active tab on each screen so it matches the screen the user is currently on.
The default components come with sensible defaults. For most apps, the main work is setting your links, copying across screens, and marking the active tab.
Building Custom Navigation
If you need full control over how your navigation looks, you can build it from scratch using basic components.
Drag in a Rectangle to serve as the navigation bar background.
Add Text components for your tab labels and Image components for your icons β this lets you use any icons you want, not just the built-in set.
Arrange and style everything to match your design.
Drag to copy each icon/text pair across your tab slots, then update the labels and icons for each destination.
Group all the navigation elements together.
Set the group to Fix position to bottom (or top, or side) so it stays anchored as users scroll.
Copy and paste the entire group onto your other main screens.
On each screen, adjust the styling of the active tab so users can see which screen they're on.
Custom navigation gives you control over icons, layout, colors, and effects β including rounded designs, centered action buttons with different transitions, and other UI patterns.
Best Practices
Always set link transitions to None. Navigation should feel like switching tabs, not navigating to a new page. This applies to both pre-built components and custom builds.
Bottom navigation disappears on interior pages. When a user taps into a detail or sub-screen, the bottom nav typically goes away. This is expected β interior pages are deeper in the hierarchy, not primary destinations.
Use visually distinct sub-navigation for interior pages. If an interior page needs its own navigation (e.g., tabs within a section), make it look clearly different from the main nav so users understand the hierarchy.
Stick to five items or fewer on bottom navigation. This is a standard mobile UX guideline. If you have more destinations, consider using top tabs or side navigation.
Top tabs complement bottom navigation well. When bottom nav handles your primary screens, top tabs can organize content within a single screen β filtering between views, categories, or data sets.
Known Limitations
Navigation components must be copied and pasted to each screen manually β changes to one copy do not sync across screens.
Active tab state must be set manually per screen. If you add or reorder tabs, you'll need to update every copy.
Custom navigation requires grouping and fixing position; forgetting either step will cause layout issues on scroll.
Last updated
Was this helpful?