Creating the Nav Bar
In this section:
Time: 10 minutes
💪Goals:
  • Learn about different Elements in the Element Catalog
  • Dive into complex styling Elements in the right panel
  • Add all of the Elements for the Nav Bar of your application
We're ready to create the nav bar itself! Here's another look so you remember what we're building out:

Styling the Nav Bar

First, drag and drop a Container element into either the Preview or Flow panel.
For the rest of the next section, you'll need to make sure that the container you just dragged into the App element is selected.
We are going to add a max-width to the nav bar Container so that even if someone is using a huge display, the content won't stretch all the way to the end of the screen. This can help the user focus on the content. Here is an example of what it will look like with a larger display:
Typically centered headers like this have a set max-width of around 1150 pixels. We can set this in size.
We are also going to change the Height settings from Expanded to Auto. This will force the container's height to be limited to the height of its children elements. Expanded does the opposite and forces the container's height to fill the height of its parent element.
For the Header, we are going to want a horizontal row that shows our logo, category links, and login button. So we can set our layout for children to be in rows and the alignment to be centered in the middle.
You'll notice that there is some padding between the edges of the application and our buttons, so we can go to the next section in the right hand panel called Padding and add 20 pixels of padding on all edges.
When the box on the left with all borders is selected, the padding will appear on the top, right, left, and bottom. To add padding to only one side, select the broken box to the right and you will have more options for selective padding.
It might not look like much now, but the nav bar we have created is set up to hold complex styling that will make the rest of our work go by quickly. Now all we need to do is add some elements.
First, let's drag and drop a Text element into our nav bar container. You can do this either by dragging it into the Preview panel, or by double clicking the container to drill into it in the Flow panel and dropping the Text element there.
Let's give the Text element the name of our shop.
You can do this either by clicking on the State tab in the righthand panel and changing the Label or by double clicking on the Text as it appears in the Preview panel while in Inspect mode (indicated on the top right of the Preview panel) and typing in your changes on the screen.
We want this Text element to act as our logo (we could also have used an Image or Icon element if we had those at our disposal), so let's give this Text element some extra padding on the right hand side to separate it from the links that will appear next to it.
To add padding to one side, we need to go to the Padding section in the Styles tab of the righthand panel and click the separated box on the right side. This will give us more options for padding.
Let's add 40 to the Right side.
Finally, let's go down to the Font Styles section in the same tab to make our Text element look more like a logo.
We're going to change the color to #131313 then select the Family (font) to be Rubik. Next we will edit the size so it is 24 pixels large and make the text thinner using Font Variant 300.
Our preview should look something like this:

Setting the Framework

Now we just need to add a container to hold links to categories and the login button.
So let's drop in a container and an unstyled UI button.
The reason we're using a container instead of directly adding Link elements is because we want the middle section to take up a lot more space.
To ensure the layout looks how we want, we are going to look at the size section for each of these three elements.
The Width for the Text and Button elements should be set to "auto" which looks like two carats hugging each other ><. This makes the element's width the same as the children inside of it.
The Width for the Container should be set to "expand" which looks like two arrows expanding away from each other. This makes the element's width expand to fill its parent container.
This way, the first and last element will remain as thin as possible while the container holding links will expand to fill the parent content.
Within this Container, we are going to want links to be aligned in rows and we will want them to be justified to the center vertically like the Text and Button are, so let's go to the Layout section and change the Mode to Rows and the Alignment to the leftmost center square.
Now that we have two Container elements, it can get confusing to differentiate their uses.
Let's rename each of them so the Flow panel indicates exactly what each element is. The outer Container should be changed to "Nav Bar" and the inner Container to "Link Wrapper."
This can be done by double clicking the header at the top of the right hand sidebar and typing in your custom label.
Let's add a Link element to the Link Wrapper. We will only need to create one because the rest will be added dynamically.
Double click on the Link Wrapper to drill into it and drag and drop a Link element into the Link Wrapper.
The Link Wrapper element doesn't have the Layout alignment we set for the Nav Bar element, so we'll need to select the Link Wrapper element and adjust the Layout to be centered and to the left.
Each Link element will need a Text element to display the category name. Let's add a Text element by dragging and dropping it either into the Flow panel (first drilling into the Link element) or directly placing it into the Link container in Inspect Mode of the Preview panel.
We want a link for each category that the store sells, so we are going to get information from our API to see how many categories there are and set the Links accordingly. Therefore, we don't need to worry about what the text of each link says right now, we just need to make sure this one Text and Link element look how we will want each of them to be styled.
We are going to set the font to Rubik, Letter Spacing to 1, and Caps to Yes.
Your Nav Bar should look like this:

Styling a Button

To get this button looking how we want it we will need to add a background color, give it a border radius, and set the styling for the Text element to be the same as the ones in the Link element above.
Let's start with the background color.
Copy and paste rgba(242,193,72,1) into the Background property of the Background tab.
Now let's add a border radius. This can be adjusted by setting the Corner Radius property of the Border tab. We want this style to apply to all four corners of our button, so we should keep the default Uniform tab selected instead of applying Custom stylings for each corner.
Let's set this to 4.
Now let's click into the Button to select the Text element and set the font styles as follows:
This same effect may also be created by deleting the default text in the Button and copying and pasting the Text element from the inside the Link to inside the Button.
Copying, pasting, and deleting may be done either through keyboard shortcuts or by accessing the Element menu from the three dots in the top right hand corner in the Flow panel.
When you are pasting, you must select the parent Element.
Now all we need to do is edit the Text in the Button to say login.
This can be achieved either by changing the label attribute in the State tab of the Text element or by double clicking on the text in the Preview panel while in Inspect mode and typing.
Congratulations! We have a fully styled Nav Bar!
You should be able to comfortably use a lot of main functions in the right hand panel of Uiflow now.
There is only one more short section on styling and then we can learn how to add logic in the Flow panel.
Copy link
On this page
Styling the Nav Bar
Adding a Text Logo
Setting the Framework
Styling a Link
Styling a Button