Bottom Navigation

Bottom Navigation menu is used as a way to provide movement through the primary destinations of your app. It is used to navigate between the top-level sections of an app.

For example, if your app is for displaying the various files in the storage, you can have a Bottom Navigation menu for the showing various files in one section, only the audio files in one section, only the video files in one section, only the documents in one section. 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.

It is recommended that this be used only to provide the navigation to the main sections of your app to make the app better in terms of user experience.

There can be a maximum of 5 menu items in the Bottom Navigation menu, at any given time.



Preview of bottom nav

Bottom Navigation menu

Tip

Although Kodular is flexible enough to allow you to add a Bottom Navigation menu anywhere in the layout of the app we recommend that it always be placed at the bottom (since it is Bottom Navigation 😉)

Anatomy

  • 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

Anatomy of bottom nav

The structure of Bottom Navigation menu item

Properties

Background Color

( Getter + Setter )
Type: Color

The background color of the Bottom Navigation Menu.

Selected Color

( Getter + Setter )
Type: Color

The color of the selected item of the Bottom Navigation Menu.

Unselected Color

( Getter + Setter )
Type: Color

The color of the unselected items of the Bottom Navigation Menu

Visible

( Getter + Setter )
Type: Boolean

Determines whether the Bottom Navigation is visible on the screen and shown to the user or not.

Options
true The Bottom Navigation is shown to the user.
false The Bottom Navigation is not shown to the user.

Methods

Add Item

( Number id, Text title, Asset image )

Adds an item to the Bottom Navigation menu.
Does nothing when the number of items is equal to five.

Params
id Number: The item added to the Bottom Navigation is identified with this ID. Should be unique for every item added.
title Text: The title text to show in the menu
image Text: The icon to show above the title

Remove All Items

( None )

Removes all items from the Bottom Navigation.

Remove Item

( Number id )

Removes a specific item from the Bottom Navigation. Does nothing when the item with specified id doesn't exist.

Params
id Number: The ID of the item which is to be removed.

Select Item

( Number id )

Selects a particular item from the Bottom Navigation. Does nothing when the item with id doesn't exist.

Params
id Number: The ID of the item to be selected.

Update Item

( Number id, Text title, Asset image )

Updates the text and image of an item which is already existing with a specific ID in the Bottom Navigation. Does nothing when the item with id doesn't exist.

Params
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.

Events

Item Selected

( Number id, Text title )

Indicates that an item has been selected(clicked by the user) from the Bottom Navigation.

Params
id Number: The ID of the item that was selected.
title Text: The title of the item that was selected.