Bottom Navigation

To Parabeac Nest to produce the highest quality code upon conversion, the Bottom Navigation will also need four simple steps.

We will use the bottom navigation design below which includes the following icons: home, start, trophy, message, education and a background rectangle.

Step 1: Group Tab Bar Items

We will first group all our elements that compose our Tab Bar. The name of the group is not imporant. For our example, we will name the group "bottomNav".

Step 2: Add <tabbar> Tag

We will now need to add a <tabbar> tag to the name of our header group.

Step 3: Add Tab Tags

We now need to add <tab> tags to each of icons inside our tab bar.

Note: do not add a <tab> tag to the background rectangle.

Adding <tab> tags

Step 4: Add <background> Tag

Lastly, if your tab bar contains a background element we will need to add a <background> tag. If your design does not have a background rectangle, one will need to be added.

Note: the name of the background rectangle is not important as long as the <background> tag is added.

That's it! Your bottom navigation bar is now optimized to produce the most efficient code possible.