It is used to create the navigation bar at the bottom of the page; it is linked to the “Navigate” action via icons to move between pages, and the current page is highlighted in color.
The Footer element is a supplementary interface element located at the bottom of your application. Used to display copyright text, navigation links, social media icons, or supplementary information, this element functionally complements the page’s content.
To get started, drag and drop the Footer element onto the screen from the UI Design module. Add a Row element inside the Footer and set the view to “4” in the Desktop settings. In the Styling Layout section, center each Column individually both horizontally and vertically. Place an Icon element inside each Column; in the Properties panel, select the icons in the following order: Home, Comment, Account, and Info. Choose a color for the Home icon in the Styling Text section. Then, copy the Row block.
In the Screens section, create the Home, Add Comment, Profile, and Info pages. Add a Footer element to each page and paste the Row block you copied. To highlight the current page, set the color of the corresponding Icon element on each screen individually in the Styling Text section.
Go to the HomePage and, for each Icon element, select the “Navigation” option under “Add Action.” In the “To Screen” field that opens, link the Home icon to the HomePage, the Comment icon to the Comment page, the Account icon to the Profile page, and the Info icon to the Info page.
When you click the “Preview” button, you’ll see a professional bottom navigation bar that provides smooth transitions between pages and instantly highlights your current location.
