Navigation Bars

Introduction

A navigation bar, often called a “navbar,” is a set of links or buttons that helps people explore a website. Think of it like a map: you can click on the link for the home page or your profile page, or find more information about the site. Navbars are usually at the top or side of a website so they’re easy to spot.

Types of Navigation Bars

Horizontal Navbar

A horizontal navbar sits across the top of a page. It usually lists all the main sections in one row.

Vertical Navbar

A vertical navbar runs up and down the side of the page. This can be useful if you have many links and want them to be easily visible.

Icons in Navbars

Icons are small pictures that help you recognize where a link goes. They can make navbars easier to understand at a glance.

Home

A home icon usually takes you to the website’s main page.

About Us

An information (info) icon is sometimes used for an About Us link or page. It lets you know you can learn more about the site.

Menu

The “hamburger menu” (three stacked lines) can show extra links when there isn’t enough room to show them all at once.

Profile

A user icon typically leads to your profile page or account settings.

Contact

A mail or envelope icon often stands for sending a message or visiting a contact form.

Quiz: Test Your Knowledge

1. What is a navigation bar (or navbar)?

2. Which icon often represents the home page link?

3. Why are navbars usually placed at the top or side of a website?

4. Which icon is commonly used to represent a menu with multiple sections?

5. What is the purpose of an 'About Us' link in a navbar?

6. Which icon might you see in a navbar for a user profile or account?

7. What does the mail or envelope icon typically mean in a navbar?

8. Why should a navbar be easy to see and read?

Summary

Navigation bars guide people around a website. They usually show up at the top or side of a page. Icons can help users easily recognize where each link leads. By understanding how navbars and icons work, you’ll have a better idea of how to move around a site and find what you’re looking for!