To produce the highest quality code conversion, the Top Navigation will need four simple steps.
We will use the top navigation design below which includes the following elements: a bell icon, a number, a start icon, a profile icon, and a background rectangle.
We will first group all our elements. The name of the group is optional. For our example, we will name the group "header".
We will now need to add a
<navbar> tag to the name of our header group.
We now need to add location tags to the items inside our nav bar. From left to right, we will identify the elements using three groups:
In the event multiple elements are located on the same location category, we will group those elements and use the appropriate tag on the newly created group. In our sample nav bar we will group the number element and start icon and use the
<middle> tag on the group.
Lastly, if your nav 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 top navigation bar is now optimized to produce the most efficient code possible.