Head over to your Adalo project dashboard. If you don't have a project yet, go ahead and create a new one.

1. Hit the “+” button to add a new screen to your app.
2. Pick a Blank screen to start with a clean slate.

1. Click on the current Home Screen.
2. In the Screen properties panel, toggle off the built-in navigation bar.

1. Use the Rectangle component to create the background of the navigation bar.

• Drag and drop the Rectangle onto the canvas.
• Position it at the bottom and adjust its width to cover the full width of the screen.
• Set the height according to your design needs (commonly around 50-60 pixels).

1. Customize the Rectangle:

• Select the Rectangle and choose the background color.
• Adjust the border radius if needed for rounded corners.

1. Drag and drop Icon components onto the Rectangle to serve as buttons.

• Place multiple Icon components based on the number of navigation items you need (e.g., Home, Search, Profile).

1. Customize each Icon:

• Select the icon you wish to use for each button.
• Adjust the size and color to fit the design.

1. Click on an Icon to select it.
2. In the components properties panel, add an Action to Navigate to the corresponding screen upon clicking the icon.

• Click on "Add Action" and choose "Link".
• Select the screen you wish to navigate to.

1. Repeat the process for each Icon to ensure all are linked to their respective screens.

1. Preview your application to test the navigation bar.

• Click the preview button at the top right corner.
• Navigate through different screens using your custom navigation bar to ensure it works correctly.

1. Fine-tune the design:

• Adjust sizes, spacing, or colors as necessary for better aesthetics and usability.
• Ensure icons are evenly spaced.

1. Make sure every navigation icon correctly links to its intended screen.

2. Consistent Checking:

• Regularly test on both mobile and web previews to verify consistent performance and appearance across platforms.