Front-end Interview Question – Design Navigation Menu

February 7, 2021 admin Coding Challenge, interview coding questions, Javascript, partner content, React, Website Design 0

Navigation Menu

In Front-end developer interview, you may be asked to design navigation bar.

Here, We have added detailed article on how you should navigate this interview question step by step.

The first step is to ask Questions to determine scope of work. You should also consider that you get 30-40 minutes to show your technical knowledge. Once you define scope of project, you can start building navigation menu.

In this article, we will build navigation menu using Vanilla Javascript to show our thought process and logical implementation, then we will revise navigation menu using React.js to upscale our project with latest technology and easy to build features. Then we will use Node.js to build navigation component to point out Server Side Rendering Trend in current Technology to improve loading performance. We will compare the implementations and discuss pros and cons for each. That way you will cover all aspects of Software Design. It is very Important that you drive this Coding Interview Question as you can showcase your strong points, strengths and knowledge which they are looking for!

It is very important that you show thorough knowledge on latest technologies as well as performance overview.

Your ask is to Build Navigation Menu:

Questions: Is there a design specifics for Menu. I mean would it be single level or multi level menu?, Would it be responsive or adoptive layout? Is there any specific requirement for animation? For Menu link would it be hover effect or click through?

Single level or Multi level menu? => Multi level Menu
Responsive or Adoptive layout? => Adoptive Layout
Desktop: Full Navigation Menu
Mobile/Tablet: Hamburger Menu
Animation? => Transition Delay
Hover effect or Click through? => Hover Effect.

Once you have asked questions. You can start adding your details about how would you accomplish it.

HTML5 => 
  I will use Semantic Nav element for desktop.
  I will use Modal for Mobile Hamburger Menu.
CSS3 =>
  I will use grid Layout.
Javascript =>
  I will use Event Listener to fire callback functions for Mouse and keyboard events.

Read More About Front-End Interview Prep Guide.
Read More About Software Engineer Prep Guide.

Now We First Implement HTML5 Semantic Layout

<header>
  
    <button id="explore">
      <a href="#modalNav">
        <span>Explore</span>
      </a>
    </button>
  
    <nav id="modalNav">
      <ul class="primary-links">
        <li class="primary-links-texts">
          <a>Home</a>
        </li>
        <li class="primary-links-texts">
          <a>Fashion</a>
          <ul class="secondary-links">
            <li class="secondary-links-texts"><a>Spring</a></li>
            <li class="secondary-links-texts"><a>Winter</a></li>
            <li class="secondary-links-texts"><a>Fall</a></li>
            <li class="secondary-links-texts"><a>Summer</a></li>
            <li class="secondary-links-texts"><a>Evergreen</a></li>
          </ul>
        </li>
        <li class="primary-links-texts">
          <a>About Us</a>
        </li>
        <li class="primary-links-texts">
          <a>Contact Us</a>
        </li>
      </ul>
    </nav>
  
  </header>

You should mention that now you will add css with Mobile First Design. Mobile first layout is the best practice.

Now We add CSS for mobile Layout

@media screen and (max-width: 600px) {
  
  #explore {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: lightgray;
  }

  #modalNav {
    display: none;
    background-color: lightgray;
    margin-top: -10px;
  }

  #modalNav:target {
    display: block;
  }

  .primary-links {
     display: block;
     padding: 0px;
   }

  .primary-links li {
     display: block;
     padding: 10px 0px;
   }
  
  .primary-links ul {
    top: 8%;
    left: 30%;
   }
}

Now We add CSS for Desktop/Tablet Layout

#explore {
  display: none;
}

.primary-links {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

.primary-links .primary-links-texts a {
   margin-left: 20px;
   font-weight: 700;
 }
    
.primary-links .primary-links-texts a:hover {
   text-decoration: underline;
}

.primary-links-texts ul {
  display: none;
}

.primary-links-texts:hover > ul {
  display: block;
  position: absolute;
}

.primary-links ul {
  list-style: none;
  background-color: black;
  color: white;
  text-align: center;
  margin: 0;
  padding: 0;
}
    
.primary-links ul li {
  width: 120px;
  margin: 0 auto;
  padding: 8px;
  text-align: center;    
}
    
.primary-links ul li a {
  text-decoration: none;
  cursor: pointer;
  width: 120px;
  margin-left: 0px;    
}

.secondary-links-texts:hover {
  background-color: red;
  transition: 2s;
  -moz-transition: 2s;
  -ms-transition: 2s;
  -webkit-transition: 2s;
}

You can create NavBar component for React App.

You can use same code and just present as Navbar component to show how you can easily create React component to use in your app.

You don’t need to rewrite whole code but You may just create class or functional component to preview react knowledge.

import React, { Component } from "react";
import '.././nav.css';

class NavBar extends Component {
  render() {
    return (
      <React.Fragment>
        <header>
          <nav></nav>
        </header>
      </React.Fragment>
    );
  }
}

export default NavBar;

Here is working component.

import React, { Component } from "react";
import '.././nav.css';

class NavBar extends Component {
  render() {
    return (
      <React.Fragment>
        <header>

          <button id="explore">
            <a href="#modalNav">
              <span>Explore</span>
            </a>
          </button>
          <nav id="modalNav">
            <ul class="primary-links">
              <li class="primary-links-texts">
                <a>Home</a>
              </li>
              <li class="primary-links-texts">
                <a>Fashion</a>
                <ul class="secondary-links">
                  <li class="secondary-links-texts"><a>Spring</a></li>
                  <li class="secondary-links-texts"><a>Winter</a></li>
                  <li class="secondary-links-texts"><a>Fall</a></li>
                  <li class="secondary-links-texts"><a>Summer</a></li>
                  <li class="secondary-links-texts"><a>Evergreen</a></li>
                </ul>
              </li>
              <li class="primary-links-texts">
                <a>About Us</a>
              </li>
              <li class="primary-links-texts">
                <a>Contact Us</a>
              </li>
            </ul>
          </nav>
        </header>
      </React.Fragment>
    );
  }
}

export default NavBar;

Now You can also use Node.js to implement Navbar. Many Apps are build in nodejs to take advantage of nodejs.

You need to create Nav handlebar. To do that you need to create navbar.hbs.

<nav id="modalNav">
  <ul class="primary-links">
  {{#each data.links}}
    <li class="primary-links-texts">
      <a class="nav-link {{#if this.active}}active{{/if}}" href="/pages/{{this.link}}">{{this.fileName}}</a>
    </li>
  {{/each}}
</nav>

In Summary, it is very important that you cover all aspects of Software Design. Scoping work, implement it and Upscale it.