Bottom Navigation Full Block Explanation - Free AIA

30 Jan 2019, 04:23 PM
Kodular Components

Bottom Navigation menu is used as to navigate between the sections of an app. You can add maximum 5 menu item in the bottom of your screen using this component. Bottom Navigation menu is meant to be stay at the bottom of the screen  

For example, if your app is for displaying a simple menu for a blog app then you can have a Bottom Navigation like Home, Trending and User Account menu for the showing various screen navigation. Now this is a right usage of Bottom Navigation menu, since these are the main sections of this particular app and they facilitate navigation thorough them.

For example you can create a Bottom Navigation menu like the image given below. If you want to download the Test AIA file then click on the link given a the end of this article.

1. Creating a Bottom Sheet Menu
In the component palette, click on the category User interface and drag the Bottom Navigation component into the design viewer.

2. Add Item in Menu - on screen initialization you have to call Add Item block to add menu item in the bottom navigation,  Maximum 5 menu is allowed In Bottom navigation. It provides three options - id, title and image. 

id - id is used to identify the position of the menu item, To manage the menu item like update or delete the content you will need a id to do that.

title - The name of the menu item that will shown in the Bottom Navigation menu.

image - The icon that will be shown above the title 

3. Item Selected - this block is used when any bottom tab is clicked, with this component you can get the clicked tab ID and Title which you have added in the "bottomNav" procedure. For Ex - changing a label text or screen title with the title of the current active tab, just like the example below.

4. Select Item - "Select Item" block is used to select a particular bottom navigation tab using ID. here i have used another list picker value (1,2,3,4,5) to select a particular tab. It does nothing when the item with id doesn't exist.

5. Update Item - "Update Item" block is used to update any tab data like image or title using an ID. Here i have updated the tab details on a button click with the values from the Textbox component

id  (number)- The ID of the item to be updated.
title (text) -  The new title to be set instead of the old one.
image (asset) - The image that is updated instead of the previous one.

6. Remove All Items - "Remove all item" block is used to remove all blocks at once.

7. Remove Item Using ID - this block is used to remove the tab from bottom navigation by calling an tab ID. For Ex - This list picker contains value (1,2,3,4,5). so if user selects any no from list picker it will remove the selected no Tab from the bottom navigation

8. Properties 

  • Background Color - Change The background color of the Bottom Navigation Menu.
    Type - Color
  • Selected Color - The color of the selected item of the Bottom Navigation Menu.
  • Unselected Color - The color of the unselected items of the Bottom Navigation Menu 
    Type Color
  • Visible - Determines whether the Bottom Navigation is visible on the screen and shown to the user or not. 
    Type True & False

Learn more in details at - Kodular Documentation Website

Click on the Button Below to Download AIA File

Download AIA

Terms and Conditions

This Project is Developed By Tech CVR

  1. You cant sell this aia to any person. if you want to sell it then you have to contact the original creator of this aia at - or using email at
  2. You cant post videos about this software on youtube or write any blog or article or any social media platform without the original creators permission
  3. You cant modify the terms and conditions.

This project is also licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. To view a copy of this license, visit or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA.

Search by Tags
Bottom NavigationKodular ComponentFree AIAAIAFree AIA DownloadBottom Navigation Full Explaination

Bottom Sheet Menu Full Block Explanation - Free AI...

Kodular Components

Bottom Sheet Menu - Learn every block details and how to implement it in your app

28 Jan 2019