In this short guide, you will learn how to easily build a horizontal and vertical navigation bar using HTML and CSS. An HTML navigation bar is a critical component of great web design. Providing various display options for navigation can give your site added style and function.
Before diving into the world of navigation, be sure to get a grasp on the basics of both HTML and CSS. For the former, have a read on HTML for Dummies for a quick foundation overview on HTML. With CSS, the guide CSS Basics for Beginners, you will be up and running with stylesheets in no time.
If you are already familiar with both concepts, you can jump right into the next section to make your own HTML navigation bar operational.
What Is an HTML Navigation Bar and Why Do I Need It?
A HTML navigation bar should be considered as a form of dialog between yourself and the site’s end-users. It serves as a method for you to inform them of where they are, where they can go, and what content they should expect to see.
The navigation bar should be easy to find on the page but not intrusive as to interfere with the content of the page. The navigation bar itself can be built using simple HTML alone. However, it benefits from the added styling options that CSS provides.
How Do I Build an HTML Navigation Bar?
When you are building an HTML navigation bar, you are essentially providing a list of embedded links for the user to work with. The links can point to other pages for your site such as the “About Us” or “Contact” areas. Links can also point to downloadable content hosted on the site as well.
In the example image below you can see an unordered list has been created. Inside the list are list elements that contain HTML anchor tags. Each active tag has the desired link for the user along with a text description for the link’s destination.
If you are not familiar with using lists in HTML, please refer to the post CSS List Styling Made Easy for a quick bit of guidance on the topic. For information on how to work with the anchor tags, you can read the post The Easy Guide to Styling HTML Links Using CSS.
With the inclusion of the list content, a rudimentary form of navigation has been added onto the page. However, it leaves much to be desired in areas of form and function on the page itself.
In the next example, the CSS list property of “list-style-type” is used to remove the bullet points from the list. This provides the following render on the HTML page.
This appearance certainly provides a cleaner format for the links, yet lacks the HTML navigation bar format you want. The goal is to now have the navigation bar move to the well-known horizontal position.
Creating a Horizontal HTML Navigation Bar
Working with the base of the established list of links, you now need to alter their positions to fall in line with each other. More specifically, you want each list item to sit together on the same HTML block level.
To achieve this change, the CSS float property can be used on the list elements. Each list item can be told to “float” to the left, which will have them all move up and take any available space allowed.
Next, the anchor elements will need to know how to behave with this change. By setting their CSS display properties to “block” you can ensure they will act as block-level elements. In the following example image, you can see the CSS works in unison to render the HTML page using these values.
Next, let’s take that navigation bar and place it in a more user-friendly area at the top of the page. In the following HTML sample code, notice the link list has been moved directly under the body of the document.
After that, CSS is used to make sure the navigation bar looks decent in its new location. The margin, padding, and overflow properties are used to make sure anchor content does not “bleed” through from the top.
With the code saved and in effect, you will have the following HTML render appear.
You now have an active horizontal HTML navigation bar in effect at the top of the page. Yet, what if you are not happy with the result and instead need it in a vertical position instead?
How to Create a Vertical HTML Navigation Bar
Depending on the layout and design of your page, a vertical navigation bar may be exactly what you need. Thankfully there are a few ways to handle this using CSS. The first step is to float the list itself. For this example, it will be set to the left. A right padding can also be applied to help segment the navigation bar from the body content as well.
The width value of the anchor tags should also be altered to ensure that the navigation bar does not simply fill the screen, (unless your design calls for that). You can also add a line-height property to the navigation bar as well to help properly space the link content. See the image below for examples of how this appears in practice.
CSS Tools to Help Enhance Your HTML Navigation Bars
This guide provides a simple foundation for setting up your own vertical or horizontal HTML navigation bar. However, there is much more you can do with the understanding of additional CSS properties.
One of these that should be quite useful is the float property. Knowing how and when to use a float can be very helpful in designing the content layouts. Read more about this in the post The Beginners Guide to CSS Float. You may even find that a float is simply not the answer as a Grid or Flex concept could work even better.
Another interesting option to take advantage of is the use of HTML icons. By importing various external stylesheets, you can add in a wide variety of icons to enhance your site. These can even be added to your links to give an extra kick of design to them. For instance, use a wrench icon on your support link to indicate they can fix the issue. If you are interested in learning more, have a read on The Easy Guide to Using HTML Icons.
Don’t stop with just navigation bars, you can do so much more. The creative powers in programming open the door to even more ideas. If you want to advance your career, take the first steps by learning to code. Having these skills can help you open doors to those new professional possibilities. Enroll in Udacity’s Intro to Programming Nanodegree today to start the journey.
