How To Create a Top Navigation Bar
Navigation
How To, for Web Applications
By: Chrysanthus Date Published: 9 Mar 2025
This article explains how to create a top navigation bar, using an example. A navigation bar is a bar of rectangular hyperlinks. Anywhere the user clicks within the rectangle (not necessarily on the text), the action for the hyperlink takes place. Note: the hyperlink (anchor) element is rectangular by default. In the example, the bar is at the top of the webpage from left to right (horizontal). The rectangular hyperlinks are aligned to the left, within the bar, and each has the height of the bar. The bar is black in color, and only the text of the hyperlinks are seen in white color (without the mouse pointer around the bar). When the mouse pointer goes over a rectangular hyperlink, its background color becomes light gray and its foreground color (color of text) becomes black. The rectangular hyperlink that is active, has a green background color.
At the end of this tutorial, is the complete web page code, which the reader should copy and paste in a text editor. Save the file with a name having the extension, .html . Then open the file in the browser to appreciate what a Top Navigation Bar is. Move the mouse pointer over each rectangular hyperlink to see the change in background and foreground color. The reader is advised to test the complete code first, before continuing to read this article.
The HTML Skeleton Code
The skeleton code for the web page is:
<!DOCTYPE html>
<html>
<head>
<title>Top Navigation Bar Example</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
</style>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
The HTML head element begins with a web page title. When the webpage is opened in a browser, the title of the web page appears at the browser tab. The next line in the code is for the favicon. The favicon is a small icon (image) that appears next to (on the left of) the webpage title at the browser tab. The name of the icon image here, is logo.jpg. It is good to have the same favicon in every webpage of the website. That gives some professionalism to the website. The next line in the code in the head element, is the viewport meta tag. Any webpage that is intended to be responsive must have this tag. In fact, put this in every modern webpage. The next line of code, is the description meta tag. When a search engine sees this page, it has to display the title of the page, with the description of the page, in the search engine result. This description meta tag is for that description. There is then the style and script elements, in the HTML head element. Their roles are explained below.
THE Body Element of the Webpage
The content of the body element is as follows:
<div class="topnav">
<a class="active" href="#home" id="0" onclick="fn(id)">Home</a>
<a href="#news" id="1" onclick="fn(id)">News</a>
<a href="#contact" id="2" onclick="fn(id)">Contact</a>
<a href="#about" id="3" onclick="fn(id)">About</a>
</div>
<div style="padding-left:16px">
<h2>Top Navigation Example</h2>
<p>Some content..</p>
</div>
The are two div elements. The first one is the one that concerns the top navigation bar. The class-name is "topnav" . It has 4 hyperlink (anchor) elements. The contents of the anchor (a) elements are: Home, News, Contact, and About. Each 'a' element is given a style (CSS rule) in the HTML style element, in the HTML head element. The JavaScript onclick event is to give the hyperlink that is clicked, a #04AA6D (green) background color, to show that the anchor element is active.
The Styles for the Top Navigation Bar and its Constituents
At the core of the navigation bar, is the div element with inline 'a' elements, naturally in a horizontal line. Without the styles for the div element and its anchor elements, the navigation bar will not have a modern professional look.
CSS Rule for the Body Element
The CSS rule for the HTML body element is:
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
The margin all round the body element is 0px. This is good for this particular webpage design. Under this condition, the Top Navigation Bar will align with the top edge and left edge of the body element (no space).
CSS Rule for the Top Navigation Bar div Element
The CSS rule for the bar div element is:
div.topnav {
overflow: hidden;
background-color: #333;
}
"overflow: hidden;" means that there should not be many anchor elements in the div bar. If there are many anchor elements, the extra ones on the right will be clipped off (will not be displayed). The background color of the div element is #333, which is black, but not the blackest black. There is not much styling for the bar div per se. A lot of styling goes to the anchor elements.
CSS Rule for Each Anchor Element
The anchor element is the hyperlink element. The CSS rule for each of the anchor elements is:
div.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
The selector is "div.topnav a" . So any 'a' element that is in any div element that has the class-name, "topnav", has the declaration styles in this CSS rule. The style rule is the whole code segment, beginning from the selector to the closing curly bracket.
The anchor element is rectangular and inline by default. "inline" means that the next element should appear on its right. All the anchor elements are floated to the left. Each has a text color of #f2f2f2 (whitish). Within its rectangle, the text is align at the center. Between the text and border of each 'a' element, is padding space. The top and bottom padding is 14px; and the right and left padding is 16px. The text-decoration is none, meaning that, when the mouse pointer is above the text, even though it is a hyperlink, there should be no underlining of the text. The font-size of the hyperlink text is 17px: big enough.
Anchor Element Rectangle On-hover
The on-hover CSS rule is:
div.topnav a:hover {
background-color: #ddd;
color: black;
}
When the mouse pointer enters a hyperlink rectangle, its background color becomes #ddd (grayish), and its text color becomes black (for contrast).
CSS Rule for the First Active Anchor Element
The Home section (or home page) for the website is displayed first, when the website is opened, everything being equal. And so the Home anchor element is active. It is given a #04AA6D background color (greenish); and the color of text becomes white, for contrast. The CSS rule for this is:
div.topnav a.active {
background-color: #04AA6D;
color: white;
}
JavaScript has to be used to give the other anchor elements, an active presentation, when it is clicked.
JavaScript
When the website is opened for the first time, the Home section is the current or active section, and this is indicated by the greenish (#04AA6D) background color and the white text color, of the Home anchor element, everything being equal. What happens to the background and foreground color of the other anchor elements, when they are clicked? When each is clicked, its section of the website (long webpage) comes up to fill the screen. The background color of the corresponding anchor element has to become #04AA6D and the text color has to become white, producing an active presentation, while the rest of the anchor elements, including the previous active anchor element, be at the original background and text color (be at original state). The following JavaScript code in the HTML head element carries out the function:
<script type="text/javascript">
function fn(id) {
const myCollection = document.getElementsByTagName("a");
for (let i = 0; i < myCollection.length; i++) {
myCollection[i].className = "";
}
myCollection[id].className = "active";
}
</script>
Each anchor element has the onclick event, and sends its ID to the fn() function within the script tags in the HTML head element. The function performs two operations. The first operation is to put all the anchor elements in the "inactive" state, by giving to all their class-names, the value "" (no character). The next operation puts the anchor element that was clicked in the "active" state, by giving the value, "active" to the class-name of that element. The CSS rule ("div.topnav a.active") above gives the clicked anchor element, the active presentation. Remember, className in DOM JavaScript, is the equivalent of class value, among the attributes of any HTML element. Do not confuse between giving an anchor element the active presentation, and actually bringing up the website (long page) section to fill the device screen: It is the responsibility of the href attribute of the anchor element to bring up the section to fill the screen, and it is the responsibility of the JavaScript code above to give the anchor element an active presentation.
Multi-page Websites
Many simple websites today are single long page websites, where what would have been separate web-pages, are now short sections in one long page, and each section would fill the screen (when called). The above JavaScript code works fine for such a single long page website, to give the hyperlink a special background and text color. For a multi-page website, where for example, Home, News, Contact and About are separate web-pages, use JavaScript similar to the following, to give the "active" icon, the active presentation:
<script>
if (window.location.href == 'replace with URL for Webpage 3') {
document.getElementById('3').style.backgroundColor = #04AA6D;
document.getElementById('3').style.color = 'white';
}
</script>
where 3 here is the ID for the anchor element (hyperlink) for webpage 3. Read through the code if you have not already done so. This JavaScript code must be in webpage 3. Webpage 3 must have id='3' in the corresponding anchor element in webpage 3, in order to display the anchor element in active presentation (active state).
The Complete Webpage
And there you have it: the complete webpage for the Top Navigation Bar example is:
<!DOCTYPE html>
<html>
<head>
<title>Top Navigation Bar Example</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
div.topnav {
overflow: hidden;
background-color: #333;
}
div.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
div.topnav a:hover {
background-color: #ddd;
color: black;
}
div.topnav a.active {
background-color: #04AA6D;
color: white;
}
</style>
<script type="text/javascript">
function fn(id) {
const myCollection = document.getElementsByTagName("a");
for (let i = 0; i < myCollection.length; i++) {
myCollection[i].className = "";
}
myCollection[id].className = "active";
}
</script>
</head>
<body>
<div class="topnav">
<a class="active" href="#home" id="0" onclick="fn(id)">Home</a>
<a href="#news" id="1" onclick="fn(id)">News</a>
<a href="#contact" id="2" onclick="fn(id)">Contact</a>
<a href="#about" id="3" onclick="fn(id)">About</a>
</div>
<div style="padding-left:16px">
<h2>Top Navigation Example</h2>
<p>Some content..</p>
</div>
</body>
</html>
The reader should copy and paste the code in a text editor. Save the file with a name having the extension, .html . Then open the file in the browser to appreciate a Top Navigation Bar. Move the mouse pointer over each rectangular hyperlink to see the change in background color and text color. Click some of the hyperlinks.
Chrys
Related Links:
More Related Links:
Cousins
Menus
How to Create a Menu Icon with HTML and CSS and without using a LibraryHow To Create a Top Navigation Bar
How to Create Fixed Auto Height Sidebar Menu with CSS
How to Create a Horizontal Tabs Bar with their Sections using CSS and JavaScript
How to Create a Search Menu to Filter List Items, using CSS and JavaScript
How To Create a Responsive Top Navigation Bar with Left-aligned and Right-aligned Hyperlinks
How to Create a Top Fixed Horizontal Menu with CSS
How to Create a Vertical Navigation Menu for Smartphones and Tablets Using CSS and JavaScript
How to Create a Slide Down Full Screen Curtain Navigation Menu
How To Create a Responsive Collapsible Sidebar Menu
Images
Coming soon . . .Buttons
Coming soon . . .Forms
Coming soon . . .Filters
Coming soon . . .Tables
Coming soon . . .NEXT