Responsive navigation bar – Web design tutorial


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

13 Comments

Add a Comment

Your email address will not be published. Required fields are marked *