This post will cover a few things to help you create a Navbar in Builder:
- Set up a section model to store the navbar.
- Create and style your navbar section.
- Install it on a page.
Set up a Section Model to store the navbar
Create a Section Model at builder.io/models and name it “Symbol”. This Symbol model will function as a folder where you can keep reusable blocks for your site.
Developer Note: If you haven’t created a Section for your site before, please check out Integrating Sections to install the Section Model to your app and update the preview URL of the model.
Content Creator Note: If you’re not yet integrated to a site, app, or storefront, you can use this Preview URL for the “Symbol” model: https://preview.builder.codes/?model=symbol&previewing=true
Create and style your navbar section
Head to builder.io/content and navigate to your “Symbol” model. In the top right, click the “+ New” button and choose “Symbol”. This will create a new Symbol content entry and open it in the Visual Editor for you.
Start by adding a box block to the canvas. Right-click on the box and locate the “Clear all styles” option in the menu. This will remove the default top margin and the height of the box.
In the Style tab, under Layout, open the Width dropdown and select “Full Page Width”.
You can give the box a minimum height property so that it’s easier to work with in the Editor. Locate the Min Height box and add a value like 45px. Minimum Height will make sure this box always displays as at least 45px tall, but allows it to grow in height if needed.
Next, locate the Style > HTML Attributes dropdown. Let’s add the “Header” semantic HTML tag to this navbar. If you’ve not used semantic markup before, these special tag names can help improve how search engines and screen readers use your site. Check out how changing the tag name has updated the name of the box to “Header”.
Let’s add some content to this navbar, starting with a logo, positioned to the lefthand side. Drag an image block from the Insert tab into the Header block. Click Edit > Choose Photo and upload or select your photo.
For the Builder logo, I set its width to 100px and removed the default margins:
Open the Options tab for the logo image you uploaded, and set its URL. In most cases, you’ll be sending users back to your homepage, which can be represented with a “/”.
Now that we have a working logo for your header, let’s work on the Nav Links.
Drag a box into the Header and remove its styles (Right-click, “clear all styles”). Let’s set a semantic tag for it. Under Style > HTML Attributes, give the Box a tag name of “Nav”. Now we have a place to put our site navigation links!
Add a text box to the Nav box.
We’d like to be able to have multiple navigation links next to each other, so let’s edit the Child Layout to do that. With the Nav box selected, head to Style > Child Layout > Row. You’ll see our text box slides to the left and makes room for more text boxes.
Before we start making more links, let’s set the styles we’d like all nav links to have. With the textbox selected, head to Style > Typography. Here, I’ve set the character spacing to be a little wider and bumped the weight of the font up. You may also want to select the font that matches your branding.
In the Options tab, let’s give this text of “Home” and set the link to take us to “/”.
Now, let’s duplicate this a few times for the “Products, About Us, Contact” links. Edit the Link URL to match with each page, such as “/about-us”. Notice how all the text is running along without any space between them!
Let’s fix that with a style applied to the Nav box. Select the Nav box and head to Style > CSS Properties. Add a new property and name it “gap”, then set its value to 20px. Now we have some automatic and even spacing between all our links! Of course, feel free to adjust the gap value for your layout.
Let’s also clean up the child layout of the entire Header box. Select it, then apply a Row child layout to it in the Style tab.
Let’s set the Child Layout > Justify Content of the Header box to “space between”. This will align the Header elements to opposite sides of the box:
Set the Child Layout > Align Children of the Header box to “center”. This centers the content of the Header along the middle.
Let’s apply some additional styles to finish up this design:
- Add 10 or 20px padding to all sides of the Header box
- Create a background color for the Header box. This will block content under the Header from view.
- If you’d like, add a border or shadow.
To confirm your changes and make this Symbol available in page models, hit Publish in the top right.
Install the navbar onto your page
Start from builder.io/content and open a page model.
In the Insert menu, open the “Code” folder and drag a Symbol onto the canvas.
In the Options tab, click the Model dropdown and choose “Symbol”, then select the navbar entry.
Since Symbols are their own box on the page, we need to apply some styles before finishing up. With the symbol selected, head to the Style tab and click the “width” dropdown and select “full page width”.
While we’re here, let’s set the styles to make the navbar stick to the top of the page and hover over other content. To make the effect a little more obvious, I’ve placed some templates on the page so we can scroll around:
Select the Navbar Symbol and head to the Style tab. Open the CSS Properties and locate the “position” property. Switch this from “Relative” to “Sticky”. Add a new CSS Property and call it “top”. Set this to 0. The combo of the “sticky” position and the “top” property instructs the navbar symbol to stick to the top of the page, even when scrolling. If we scroll now, this is working, but the Navbar is showing underneath content:
To fix this, we can add a final CSS Property to the Navbar. Add a property called “zIndex” and set it to “1” (if this field generates a “px”, you’ll have to delete that!) This tells the browser to display the Navbar above other content (content has a default Z Index of zero).
Now you have a basic hovering navbar symbol that is responsive for desktop and tablet designs! If you’re interested in a tutorial in this same style covering mobile styles, please let me know!