How to easily make a navbar for your HTML webpage

As your personal website grows and you begin to add numerous pages to it, a permanent navbar that displays links to each of your pages can help users easily traverse all of your pages. Below is a simple way to implement a navbar to the top of your website by using the iframe function in HTML.

We begin by constructing the navbar itself as its own separate webpage. In this example, the webpage displaying  the navbar will be named “links.html” since it will be displaying links to other pages. The only thing displayed in links.html will be a table with a link in each cell (There are other ways to display links, but for simplicity we will just use a table in this example). An example of the table portion of links.html is as follows:

<table border=”1″>
<td><A href=”page1.html” target=”body”>Link 1</A></td>
<td><A href=”page2.html” target=”body”>Link 2</A></td>
<td><A href=”page3.html” target=”body”>Link 3</A></td>

This will display a 3 cell table with links to a different page in each one. When a link is clicked, the accompanying page will be displayed in “body”.  But what is “body”? That come from the next step.

This next step involves the main index of your webpage (most likely “index.html)”. All that is needed for the body of this page are two frames: A thin frame on top that will serve as the navbar, and a larger frame on the bottom that will serve as the body of the page. Each of these frames will display a webpage within. An example of the body of the index page is as follows:


<i frame src=”links.html” width=”100%” height=”15%”>
</i frame>

<i frame src=”body1.html” name=”body” width=”100%” height=”85%”>
</i frame>


You can see that the top frame will display our links.html page, and the bottom frame (designated here as “body”) will display page1.html initially, but also any other page when that page’s link is clicked. This is because we previously designated the target of the links as “body”. So if a user clicks, say, “Link 2” on the top navbar, “page2.html” will be displayed in the body of the website while the top navbar remains where it is. This example here seems a bit unnecessary since there are only three different webpages in this example, but as the number of pages on your site grows, a navbar really helps simplify things. It should be noted that in this example, it is assumed all html pages are saved within the same directory.

And there it is. This specific example may seem a bit basic, but I found this to be a relatively easy way to include a navbar in your page, especially since you can easily add links to your navbar without having to look through numerous lines of code.

-Zach Aaron

~ by zaa918 on September 10, 2012.

One Response to “How to easily make a navbar for your HTML webpage”

  1. Hey Zach. This post made me consider new ways to layout a navigation bar on my page. But I got a little confused (I’m a super novice here) of where you are putting this navigation bar — you are saving in as a separate file under links.html? Then you are recalling it in your index.html file as an iframe?

    This could have been sorted out with screen shots of the .html files or the actual navigation bar.

Comments are closed.

%d bloggers like this: