new course
CSS grid landing page tutorial (36min)

Lesson info

Lesson info

You've got a lot of options when adding navigation to your project, and one of the most common and powerful ways to do this is through a navbar.

The navbar gives site visitors a good top-level view of the content of a website. On devices with less screen real estate, the navbar can also be configured to display a menu button which lets the user access that same navigation in a hidden menu.

We'll cover five aspects of the navbar:

  1. Adding a navbar
  2. Anatomy of a navbar
  3. Configuring the brand or logo in the navbar
  4. Adding and styling links
  5. Reusing the navbar throughout the project
Clone this projectDownload project assetsDownload lesson assets

Transcript

There are many approaches to take when adding navigation to your project, and one of the most common and powerful ways to do this is through a Navigation Bar — or "Navbar”. And as you can see on this page, the Navbar gives the user a good top-level view of the content in the project. On devices with less horizontal screen real estate, the Navbar can also be configured to display a menu button which lets the user access that same navigation vertically.

We'll cover five aspects of the Navbar: adding a Navbar to our project, anatomy of a Navbar, configuring the brand or logo on the Navbar, building out navigation links, and reusing the Navbar throughout our project.

Of course, the first step is Adding the Navbar. The Navbar element is available from the same place we find all our elements: our Elements Panel, and it's located under Components.

Now as we're dragging it in, it's helpful to glance over to the right at our Navigator to determine where we're placing the Navbar. We're putting it at the top of the page — right in our body.

There's no right or wrong way to do this. You can put it in a section, in a container, at the bottom of the page — your choice.

You can also move the Navbar at any time. It's self-contained. And we'll take a much closer look at that right now...

...in the anatomy of our default Navbar. And three main areas here we're going to look at. One of them is invisible right now, like this picture of a cloaked Klingon Bird of Prey.

The first area, to the left, is our Brand placeholder. This is a link block where we can put a logo or text or any other brand indication. That's to the left.

The second area, to the right, we have our Nav Menu. That contains all our navigation links — or "Nav Links." These usually link us to different pages or sections.

The third area, the invisible one, is the Menu Button. And the reason it's invisible is because by default we don't see it until we get into Tablet view. Go to Tablet view, now we can see and select the Menu Button. Back to our default view, of course again it's invisible to us.

All this, the brand link and the Nav Menu and the Menu Button, it's all placed neatly inside a container. That keeps the content from going to the edges of the viewport.

That's Navbar Anatomy.

Let's get our Brand or logo in there. And a great way to do this is to simply use an Image Element. From our Elements Panel, we can drag an Image Element and drop it right inside the Brand (that link block). We can drag to resize, or we can even style the image or the Brand link block in our Style Panel.

Of course a common practice for the Brand image or logo is to have it link back to the homepage. Now our image is still selected, so we can quickly grab the Brand link block by selecting the label, and then clicking on the Brand — its parent element. Now that Brand is selected, if we go on over to Element Settings, we can set a link right there, we'll choose A Different Page, and in the drop-down we'll select Home.

What if our logo doesn't have padding added? What if, when we drop it in, it looks like this? That's okay. There are lots of ways to get this right. We can quickly adjust the top-margin on our logo to push it off the top and center it.

That’s configuring the Brand (or logo) area in our Navbar.

Next is the links themselves.

We have these Nav Link placeholders here to save time, and you can edit or delete these, or you can add more. And there are two ways to add additional Nav Links. One: with any element in our Navbar selected, under the Element Settings Panel, we can press Add Link.

Another way to do this, and this a great time saver if we're planning on styling our Nav links, is to copy and paste. And right here, we'll delete all but one, and create a class. We can name a class since we're intending to reuse the class on multiple Nav links. That way, when we copy and paste this Nav link, the class is already applied to each one — each Nav link we paste in.

And from there, we can double click to edit the text inside. And by default, the width of these Nav links is being determined by the text we're typing inside, plus any padding that's being applied to our Nav link class.

We can also control the link settings — where each link is going to take us — on a per-element basis. So we can select any Nav link, and under our Element Settings Panel, we can control those link settings. Now you don't have to do this if you're just starting in a project; you can always come back later once you've fleshed out your project structure.

And that leads us to the final, and perhaps most time-saving aspect of a multi-page project...

...and that's reusing our Navbar. Now if you have a landing page for instance, maybe a one-page site? This isn't necessary. But for multi-page sites, this is massive.

With our Navbar selected, which we can see here in the Navigator, we can head on over to our Symbols Panel, and of course...create a symbol. We can call it Sample Navigation, but you can name yours more creatively. Of course that means the Navbar and everything inside is now globally accessible. In other words, now that it's a symbol, we can reuse it anywhere. We're placing that symbol — the Sample Navigation — Right under our existing Sample Navigation.

To edit the symbol, let's double-click on it. And let's try changing the text. And instantly, as soon as we finalize that change, the text changes on the other Navbar as well. If we duplicate a button, we see that change on the second Navbar, too. If we mess with our brand a bit, that carries through as well.

Now, mirroring this makes an effective demonstration, but in practicality this is best used for Navigation on separate pages. That way you can make a change on any one page that affects the others as well.

So. We can add a Navbar to our project, we know it consists of three parts: Brand, Menu Bar, and — when it's visible — Menu Button. We can drag a Brand image or logo into our Brand link block, we can add and configure links, and we can create a symbol from our Navbar that lets us reuse it anywhere in our project.