Skip to main content
Practice

What is Navigation?

Navigation refers to the part of a webpage that provides links allowing users to move to different pages or important sections of the website.

Generally, navigation is placed at the top or sidebar of a website, helping users to move easily to the desired page.

For instance, clicking on a menu item takes the user to the corresponding page, or clicking on the logo takes the user back to the main page.

In addition, it plays a crucial role in determining the structure and flow of navigation of the website, aiding users in easily exploring the site and finding the information they need.


Creating a Navigation Bar​

It is implemented using HTML and CSS. In HTML, the <nav> tag is commonly used to define the navigation area, and <ul> and <li> tags are used to create the menu containing the links.

Then, CSS is used to apply design and style.

By organizing navigation well, users can navigate a website more easily, enhancing usability.


Let's take a look at the code we will 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 material, we will examine this code in detail step by step.

Want to learn more?

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