Photo by Tommy van Kessel on Unsplash
Creating Navigation Bars using in CSS using Unordered list, Flexbox and Grid
Introduction
The navigation bar, commonly known as the nav bar, is a crucial component of a website, providing a visual structure that helps users navigate through all the different sections or pages of a website. In this blog post, we will look into some of the various techniques web developers make use of when creating navigation bars using CSS.
While there are various ways to do this, we will look at 3 of the most common way this can be achieved using some simple method then in a later post look into more advanced methods that allows us to customize and twerk with various options. By the end of this article, you'll have a comprehensive understanding of the different ways explained in this post to implement nav bars in your web projects.
Basic Navigation Bar using Unordered List (UL) and CSS
A simple and widely used approach to create a navigation bar is by utilizing an unordered list (UL) and applying CSS styles to it. This approach starts by creating an unordered list in the HTML file and then adding simple CSS properties to achieve the desired result.
HTML Structure
We first create an unordered list <ul> as the container and list items `li` as the individual menu items. Here's an example HTML structure:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
The nav tag serves as a big wrapper tag that encloses the entire navigation section. The a href tag makes each nav item clickable. The “#” symbol is just a placeholder link.
Applying Basic Styling
Having created a list containing all the nav items, we can then begin styling it. To style the nav bar, we have to remove all the default list styles. This is done by changing the listed nav items from a vertical layout to create a horizontal layout. The list of items is made to display inline. Additionally, we add padding, margin, and background color to style the menu items.
nav ul {
list-style: none;
margin: 0;
padding: 0;
background-color: #f8f8f8;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
text-decoration: none;
padding: 10px;
color: #333;
}
The <nav ul> tag targeted grabs the unordered list and then CSS properties and then we override the default settings, the bullet point is removed using the list-style: none. The margin and padding are set to 0 to eliminate extra spaces. The background is also set to any preferred color.
The “display: inline” property removes the default block display. You can then add your preferred margin to the right and left if needed.
Adding Hover and Active States
To enhance user experience, we can add hover and active states to the nav bar. There are some very basic as well as very advanced ones. But the main thing they both do is that they provide visual feedback when the user interacts with the menu items. For example, the nav items can change color when you hover the mouse over it. Here's an example CSS code to achieve this effect:
nav ul li a:hover {
background-color: #ddd;
}
nav ul li a.active {
background-color: #555;
color: #fff;
}
Code Snippet
Here's a complete code snippet demonstrating the implementation of a basic nav bar using an unordered list and CSS:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
nav ul {
list-style: none;
margin: 0;
padding: 0;
background-color: #f8f8f8;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
text-decoration: none;
padding: 10px;
color: #333;
}
nav ul li a:hover {
background-color: #ddd;
}
nav ul li a.active {
background-color: #555;
color: #fff;
}
By following this approach, you can quickly create a basic navigation bar using an unordered list and CSS. However, for more advanced layouts and customization options, we can explore other techniques such as Flexbox and CSS Grid which we look at shortly.
Flexbox Navigation Bar
Flexbox is a powerful CSS layout module that provides a flexible and intuitive way to create navigation bars. Not only is Flexbox powerful, it is also easy to learn and use. Let's look at how we can use Flexbox to create a responsive and visually appealing navigation bar.
HTML Structure:
To create a Flexbox-based navigation bar, we'll use a similar HTML structure as before:
<nav class="flex-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Styling with Flexbox
To style the Flexbox navigation bar, we'll apply CSS styles to the parent container and the list items. Here's an example CSS code:
.flex-nav {
display: flex;
justify-content: center;
background-color: #f8f8f8;
}
.flex-nav ul {
list-style: none;
display: flex;
align-items: center;
}
.flex-nav li {
margin-right: 10px;
}
.flex-nav li a {
text-decoration: none;
padding: 10px;
color: #333;
}
In the above CSS, we set the display property of the .flex-nav container to flex to activate Flexbox layout. The justify-content property with a value of center horizontally aligns the list of items within the container.
To align the list items vertically, we apply the align-items property with a value of center to the .flex-nav ul element. This centers the list items vertically within the container.
Responsive Flexbox Navigation Bar
Flexbox makes it easy to create responsive navigation bars. We can use media queries to modify the layout based on different screen sizes. Here's an example of making the navigation bar stack vertically on smaller screens:
@media (max-width: 768px) {
.flex-nav {
flex-direction: column;
}
}
The example above show us how to use a media query with a max-width of 768px to target screens smaller than 768 pixels. Within the media query, we set the flex-direction property of .flex-nav to column, which stacks the list items vertically.
Code Snippet
Here's a complete code snippet demonstrating the implementation of a Flexbox navigation bar:
<nav class="flex-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
.flex-nav {
display: flex;
justify-content: center;
background-color: #f8f8f8;
}
.flex-nav ul {
list-style: none;
display: flex;
align-items: center;
}
.flex-nav li {
margin-right: 10px;
}
.flex-nav li a {
text-decoration: none;
padding: 10px;
color: #333;
}
@media (max-width: 768px) {
.flex-nav {
flex-direction: column;
}
}
By utilizing Flexbox, we can create a responsive navigation bar that adjusts beautifully to different screen sizes. Flexbox provides a convenient way to control the alignment, spacing, and order of elements within the navigation bar.
CSS Grid Navigation Bar
CSS Grid is a powerful layout system, it provides extensive control over the positioning and alignment of elements. It gives us more room to move things around in ways that are not easy using Flexbox.
HTML Structure:
To create a CSS Grid navigation bar, we'll use a similar HTML structure as before:
<nav class="grid-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Styling with CSS Grid
To style the CSS Grid navigation bar, we first have to apply CSS styles to the parent container and the list items. Here's an example that shows how to do this:
.grid-nav {
display: grid;
justify-items: center;
background-color: #f8f8f8;
padding: 10px;
}
.grid-nav ul {
list-style: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
padding: 0;
}
.grid-nav li {
text-align: center;
}
.grid-nav li a {
text-decoration: none;
padding: 10px;
color: #333;
}
In the example above, we set the display property of the .grid-nav container to grid to activate CSS Grid layout. The justify-items property with a value of center horizontally aligns the list items within the container.
To define the layout of the list items, we use the grid-template-columns property with the repeat function. In this example, we create four equal-width columns using repeat(4, 1fr). The gap property sets the spacing between the list items.
Creating Responsive CSS Grid Navigation Bar
In a way much similar to Flexbox, CSS Grid allows us to create responsive navigation bars by applying media query properties. We can modify the grid layout based on different screen sizes. Here's an example of making the navigation bar stack vertically on smaller screens:
@media (max-width: 768px) {
.grid-nav ul {
grid-template-columns: 1fr;
}
}
We have used a media query with a max-width of 768px to target screens smaller than 768 pixels in the example given above. Within the media query, we modify the grid-template-columns property of .grid-nav ul to 1fr, which creates a single-column layout.
Code Snippet
Here is the complete code we used in making a navigation bar using the Grid method:
<nav class="grid-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
.grid-nav {
display: grid;
justify-items: center;
background-color: #f8f8f8;
padding: 10px;
}
.grid-nav ul {
list-style: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
padding: 0;
}
.grid-nav li {
text-align: center;
}
.grid-nav li a {
text-decoration: none;
padding: 10px;
color: #333;
}
@media (max-width: 768px) {
.grid-nav ul {
grid-template-columns: 1fr;
}
}
By using Grid, we can create navigation bars with more complex layouts, such as multi-column designs. CSS Grid provides extensive control over the positioning and alignment of elements, making it a powerful tool for creating highly customizable navigation bars.
Conclusion
In this post, we explored three different techniques for creating navigation bars using CSS: the basic nav bar, Flexbox, and CSS Grid. Here is a brief recap of what we looked at:
Basic Navigation Bar
Utilizes an unordered list (`<ul>`) and CSS styling to create a simple and straightforward nav bar.
Offers a quick and easy way to create a basic navigation structure.
Provides control over styling, hover, and active states.
Suitable for smaller projects or when simplicity is desired.
Flexbox Navigation Bar
Utilizes Flexbox, a powerful CSS layout module, to create flexible and responsive navigation bars.
Provides excellent control over alignment, spacing, and ordering of elements.
Offers easy creation of horizontally or vertically centered nav bars.
Ideal for creating responsive designs and accommodating different screen sizes.
CSS Grid Navigation Bar
Utilizes CSS Grid, another powerful layout system, to create navigation bars with more complex layouts and customization options.
Offers extensive control over positioning and alignment of elements.
Enables the creation of multi-column navigation bars.
Provides responsiveness through the use of media queries.
Considerations for Choosing the Right Technique
Having learned all this, it is easy to get confused about which technique you should make use of. Now, do not worry at all about it because they all work and if one of them does the work for you why worry about the others? But there are also times you may need to give priority to one over the other.
When selecting the appropriate technique for your navigation bar, consider the following factors:
Project Requirements: Assess the specific needs of your project. For simple and basic navigation structures, the basic nav bar may suffice. For more complex layouts or customization options, Flexbox or CSS Grid would be more suitable.
Responsiveness: If your navigation bar needs to be responsive and adapt to different screen sizes, both Flexbox and CSS Grid offer responsive capabilities. Flexbox is well-suited for single-axis layouts, while CSS Grid excels in multi-axis layouts.
Learning Curve: Evaluate your familiarity with each technique and the learning curve involved. The basic nav bar is straightforward, while Flexbox and CSS Grid may require more in-depth understanding.
Browser Support: Consider the browser compatibility required for your project. Flexbox has good support across modern browsers, while CSS Grid has excellent support but may require fallback options for older browsers.
Take the time to practice and apply different styles, transitions, and effects to your navigation bars. Play around with various positioning techniques and customization options. By doing so, you'll gain a deeper understanding of CSS and be able to create unique and visually appealing navigation bars that suit your project's requirements.
Remember, the more you practice and write more lines of code, the more confident you'll become in creating navigation bars that not only provide effective navigation but also enhance the overall design and user experience of your website.