company logo

Before you start

Components List

Navigation

Data Display

Forms

Creating a Navigation Bar using HTML and CSS

What you'll learn

  • Proper HTML semantics for creating a NavBar
  • How to use Flexbox to create the basic layout

Prerequisites

  • Basic HTML and CSS

Toggle for React!

The Code

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Static Site</title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <nav>
        <a href = "/">Logo</p>
        <div class = "right-cont"> 
            <ul role = "menubar">
              <li role="none"><a href = "/home" role="menuitem">Home</a></li>
              <li role="none"><a href = "/about" role="menuitem">About</a></li>
              <li role="none"><a href = "/blog" role="menuitem">Blog</a></li>
            </ul>
        <div class = "button-cont">
            <button class = "sign-in-btn">Sign in</button>
            <button>Sign up</button>
        </div>
        </div>
    </nav>
    </body>
    </html>
Open on CodeSandboxOpen Sandbox

* If the component preview isn't loading, try refreshing the page.

* You can adjust the size of the code preview and code by draging the sides!

Explanation

HTML

  • Let's start with semantics, our navbar will be contained in the HTML tag <nav>. This allows screen readers and other assistive technologies to recognize where the navigation bar is.
  • Everything that should redirect the user(nav-links) will be wrapped in a <a> which will define our hyperlinks. You will notice our navigation links are an unordered list, <ul>. Back to semantics, this shows assistive technology that we have a group of links. This also makes our code easier to read, instead of using tons of <div>s.
  • Within our unordered list, we add ARIA roles to each <li> and <a> tag. We need to tell assistive technologies this isn't just a list, rather, they are navigation items. We give 'none' to <li> to show they have no purpose, and 'menuitem' for each <a> to show they are menu items
  • We will be using Flexbox to style our navbar, which is why we have two sections. Our logo will be on the left side, and our links and buttons will be on the right. That's why we contain our right side in a div with the class 'right-cont'

CSS

  • Let's reset some styles globally so we don't have unpredictable behavior. If you don't understand why we do this, check out the first link in the resources below.
  • We will make our <nav> a flex container, this will affect its direct children(our logo and right-cont <div>). We will center our children and use 'justify-between' to create space in the middle. Add some padding and we have created our outer flex layout, great work!
  • For our <a> tags, we will erase its default styling to make it look cleaner. We will also do this for our <ul> tag as well.
  • We need to create another flex layout, this time, on our 'right-cont' <div>. We will make it a flex container, align the items vertically, and add a bit of space. Now within our 'right-con' <div>, we have two more flex layouts, flexception! Both our <ul> and 'button-cont' <div> will be flex containers with some gap.
  • Finally, we'll add some styles to both of our buttons and style our sign-in <button> with no background. That's it!

Resources

Made by Sam Kotecha

linkedin logo