Skip to main content
Crowdfunding
Python + AI for Geeks
Practice

What is Navigation?

Navigation is the part of a webpage that provides links for users to move to different pages or to the main sections of a website.

Navigation is typically placed at the top or sidebar of a website, helping users easily reach their desired pages.

For instance, clicking on menu items will direct users to the corresponding pages, or clicking on a logo would take them back to the main page.

Additionally, it plays a crucial role in determining the website's structure and navigation flow, assisting users in easily exploring the website and finding the information they need.


Creating a Navigation Bar​

It is implemented using HTML and CSS. In HTML, a navigation area is typically defined using the <nav> tag, and menus are created using <ul> and <li> tags that contain links.

Subsequently, CSS is used to designate the design and style.

A well-organized navigation can make it easier for users to explore the website and improve usability.


Let's take a look at the code you'll learn.

Example Code for Navigation Bar - html
<nav class="navbar">
  <div class="container"></div>
</nav>
Example Code for Navigation Bar - css
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: white;
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  height: 80px;
  width: 100%;
}

In the next learning materials, we will examine this code one by one in detail.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.