Build a functional Navbar

Here we will build a functional navbar with drop downs for certain parts of the navbar.

Step 1

First we want to create a export for the Navbar function that is it. We just work on the naming and the export

export function Navbar () {
  return
}

Step 2

Inside the Navbar component, return a nav element that has a className of navbar.

The reason why className is used here instead of class is because class is a reserved keyword in JavaScript. So, React uses className as a way to apply classes to elements.

export const Navbar = () => {
  return <nav className="navbar" />
}

Step 3

Create a ul element inside the nav element. Inside that ul element, create three list items.

Remember that <ul> is a list and the <li> will go inside the list.

export const Navbar = () => {
  return (
    <nav className="navbar">
      <ul>
        <li> Item 1</li>
        <li> Item 2</li>
        <li> Item 3</li>
      </ul>
    </nav>
  )
}

Step 4

Give all three li elements a className of nav-item.

export const Navbar = () => {
  return (
    <nav className="navbar">
      <ul>
        <li className="nav-item"></li>
        <li className="nav-item"></li>
        <li className="nav-item"></li>
      </ul>
    </nav>
  )
}

Step 5

Create an anchor element inside the first li element. Give the a element an href attribute of # and the text Dashboard.

export const Navbar = () => {
  return (
    <nav className="navbar">
      <ul>
        <li className="nav-item">
          <a href="#">Dashboard</a>
        </li>
        <li className="nav-item"></li>
        <li className="nav-item"></li>
      </ul>
    </nav>
  )
}

Step 6

Create another a element inside the second li element. Give it an href attribute of # and the text Widgets.

export const Navbar = () => {
  return (
    <nav className="navbar">
      <ul>
        <li className="nav-item">
          <a href='#'>Dashboard</a>
        </li>
        <li className="nav-item">
          <a href="#">Widgets</a>
        </li>
        <li className="nav-item"></li>
      </ul>
    </nav>
  )
}

Step 7

Inside the third list item, create a button element with an aria-expanded attribute set to false. Also, set the text of the button to Apps.

The aria-expanded attribute will communicate to screen reader users that the button triggers an expandable submenu.

export const Navbar = () => {
  return (
    <nav className="navbar">
      <ul>
        <li className="nav-item">
          <a href='#'>Dashboard</a>
        </li>
        <li className="nav-item">
          <a href="#">Widgets</a>
        </li>
        <li className="nav-item">
          <button aria-expanded="false">Apps</button>
        </li>
      </ul>
    </nav>
  )
}

Step 8

Still inside the third li element, create a ul element for the popup. Give it a className of sub-menu and an aria-label of Apps.

export const Navbar = () => {
  return (
    <nav className="navbar">
      <ul>
        <li className="nav-item">
          <a href='#'>Dashboard</a>
        </li>
        <li className="nav-item">
          <a href="#">Widgets</a>
        </li>
        <li className="nav-item">
          <button aria-expanded="false">Apps</button>
          <ul className="sub-menu" aria-label="Apps">
          </ul> 
        </li>
      </ul>
    </nav>
  )
}

Step 9

Create three new list items inside your ul.sub-menu element.

export const Navbar = () => {
  return (
    <nav class="navbar">
      <ul>
        <li className="nav-item">
          <a href='#'>Dashboard</a>
        </li>
        <li className="nav-item">
          <a href="#">Widgets</a>
        </li>
        <li className="nav-item">
          <button aria-expanded="false">Apps</button>
          <ul className="sub-menu" aria-label="Apps">
            <li> </li>
            <li> </li>
            <li> </li>
          </ul>
        </li>
      </ul>
    </nav>
  )
}

Step 10

Inside each li element, create an anchor element with an href attribute set to #.

export const Navbar = () => {
  return (
    <nav className="navbar">
      <ul>
        <li className="nav-item">
          <a href='#'>Dashboard</a>
        </li>
        <li className="nav-item">
          <a href="#">Widgets</a>
        </li>
        <li className="nav-item">
          <button aria-expanded="false">Apps</button>
          <ul className="sub-menu" aria-label="Apps">
            <li></li>
            <a  href="#"></a>
            <a  href="#"></a>
            <a  href="#"></a>
            <li></li>
            <li></li>
          </ul>
        </li>
      </ul>
    </nav>
  )
}

Step 11

To finish things up, set a text of Calendar for the first anchor tag, Chat for the second, and Email for the third one.

With that, you mega navbar component is complete!

export const Navbar = () => {
  return (
    <nav className="navbar">
      <ul>
        <li className="nav-item">
          <a href='#'>Dashboard</a>
        </li>
        <li className="nav-item">
          <a href="#">Widgets</a>
        </li>
        <li className="nav-item">
          <button aria-expanded="false">Apps</button>
          <ul className="sub-menu" aria-label="Apps">
            <li><a href="#">Calendar</a></li>
            <li><a href="#">Chat</a></li>
            <li><a href="#">Email</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  )
}

Final Thoughts

nav was the name of the top case for the panel. This is not a standard so much as a way to set the name of the section for the CSS. ul is used to create a list and then the items in the list are li (list items). Finally we can create an anchor with the a attribute, the href is a way to set a link to an other page.