Top Navigation
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.

Step 1: Group Nav Bar Items

We will first group all our elements. The name of the group is optional. For our example, we will name the group "header".
Nav Bar items grouped in "header"

Step 2: Add <navbar> Tag

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

Step 3: Add Location Tags

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: <leading>, <middle> and <trailing>
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.

Step 4: Add <background> Tag

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.
<background> tag added
That's it! Your top navigation bar is now optimized to produce the most efficient code possible.
Last modified 5mo ago