How to Create a Horizontal Pill Navigation Menu Bar with CSS
Navigation
How To, for Web Applications
By: Chrysanthus Date Published: 14 Mar 2025
A Pill Navigation Menu Bar is a navigation menu, where the individual hyperlinks appear with all the four corners rounded, looking like pill-shaped buttons. In the case of the Horizontal bar, there would be space between the hyperlinks. This article explains How to Create a Horizontal Pill Navigation Menu Bar with CSS.
At the end of this tutorial is the complete code for the webpage. The reader should copy the complete code into a text editor. Save the file with any name having the extension, .html . Open the HTML file in a browser. Point the mouse pointer on the different hyperlinks and click some of them. The reader is advised to do this first before continuing to read the rest of this tutorial.
The Webpage Skeleton Code
The skeleton code for the webpage is:
<!DOCTYPE html>
<html>
<head>
<title>Pill Navigation Menu with CSS</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>
A modern professional webpage should have at least the first four tags in the HTML head element above. All the presentation code for the navigation menu bar are in the HTML style element in the HTML head element. The script element in the HTML head element will have a short JavaScript to indicate which hyperlink is active. The word "active" here, means that the hyperlink that is highlighted is the one whose section currently fills the screen or the one whose webpage is currently loaded into the browser.
The HTML Body Element
The minimum content of the body element should be:
<h2>How To Create a Pill Navigation Menu</h2>
<div class="pill-nav">
<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>
There is one div element in the body element and it is for the navigation menu bar. The anchor (a) elements form the content of the div. The anchor element is the code for the hyperlink. The class-name for the div element is "pill-nav" . The first anchor element is made active with the class-name "active" . Each anchor element has an ID and the onclick event.
The HTML Style Element
All the styling including the rounded corners are in the HTML style element.
The Body Style
The CSS rule for the HTML body element is:
body {
font-family: Arial, Helvetica, sans-serif;
}
The Navigation Menu div Bar Style
Actually there is no styling for the navigation menu div bar. It is the 'a' elements that form its content that are styled - see below.
CSS Rule Common to all the Navigation Anchor Elements
The CSS rule common to all the navigation anchor elements is:
div.pill-nav a {
color: black;
text-align: center;
padding: 14px;
text-decoration: none;
font-size: 17px;
border-radius: 5px;
}
The color of text is black, except when the anchor element is active, and then it becomes white (see how below). Each text is aligned at the center of the anchor ('a') element. The padding at the four different sides of the text (before the borders of the anchor element) is 14px. "text-decoration: none;" means that the hyperlink (anchor element) text should not be underlined when the mouse pointer goes over it. The font-size for text as content for each anchor element is 17px. One of the must important features of this design, is the four rounded corners. Each of the four corners for each anchor element is given the radius of 5px. The bigger the radius, the greater the curvature.
Space between the anchor elements are provided by their default transparent borders and/or their default transparent margins.
Hyperlink On-hover Style
The CSS rule for the presentation of the hyperlink, when the mouse pointer goes over it is:
div.pill-nav a:hover {
background-color: #ddd;
color: black;
}
The background color becomes gray (#ddd); the foreground (color of
text) remains black, when the mouse pointer hovers a hyperlink.
The Active Hyperlink CSS Rule
The word "active" here, means that the hyperlink that is highlighted is the one whose section currently fills the screen or the one whose webpage is currently loaded to the browser. The CSS rule for that is:
div.pill-nav a.active {
background-color: dodgerblue;
color: white;
}
When an anchor element is highlighted, the background color becomes dodgerblue and the color of text becomes white, for contrast. With all the code above, at this point, only the first hyperlink will be highlighted, because its class attribute is currently "class='active'". In order to highlight the other hyperlinks and "deactivate" the current highlighted hyperlink, JavaScript is needed.
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 dodgerblue 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 dodgerblue 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-name variables, 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 the 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" menu item, the active presentation:
<script>
if (window.location.href == 'replace with URL for Webpage 3') {
document.getElementById('3').style.backgroundColor = dodgerblue;
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 Pill Navigation Menu Bar example is:
<!DOCTYPE html>
<html>
<head>
<title>Pill Navigation Menu with CSS</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 {
font-family: Arial, Helvetica, sans-serif;
}
div.pill-nav a {
color: black;
text-align: center;
padding: 14px;
text-decoration: none;
font-size: 17px;
border-radius: 5px;
}
div.pill-nav a:hover {
background-color: #ddd;
color: black;
}
div.pill-nav a.active {
background-color: dodgerblue;
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>
<h2>How To Create a Pill Navigation Menu</h2>
<div class="pill-nav">
<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>
</body>
</html>
The reader should copy the complete code into a text editor. Save the file with any name having the extension, .html . Open the HTML file in a browser. Point the mouse pointer on the different hyperlinks and click some of them.
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 . . .BACK