Navigations

Navigation is first and most important component of any website. Without navbar user will not know which brand is it, where to look more and to connect with brand.

Navbar

Below is an example of a responsive navbar with menu options on the right side of the navbar. The navbar adjusts itself according to the size of the screen.

Have a look at the live demo.

        
  <header class="header">
    <nav class="navbar">
      <section class="navbar-brand">
        <a href="/index.html">
          <img
            class="brand-logo"
            src="../../assets/horsemaker.svg"
            alt="horsemaker"
          />
        </a>
      </section>
      <section class="navbar-menu">
        <ul class="navbar-links">
          <li class="navbar-link">
            <a href="/index.html#installation">Installation</a>
          </li>
          <li class="navbar-link">
            <a href="/index.html#components">Components</a>
          </li>
          <li class="navbar-link"><a href="#">Docs</a></li>
          <li class="navbar-link">
            <a
              target="_blank"
              href="https://github.com/horsemaker/horsemaker-UI"
              >Github</a
            >
          </li>
        </ul>
        <span class="material-icons navbar-icon"> menu </span>
      </section>
    </nav>
  </header>
  <ul class="navbar-responsive-links">
    <li class="navbar-link">
      <a href="/index.html#installation">Installation</a>
    </li>
    <li class="navbar-link">
      <a href="/index.html#components">Components</a>
    </li>
    <li class="navbar-link"><a href="#">Docs</a></li>
    <li class="navbar-link">
      <a target="_blank" href="https://github.com/horsemaker/horsemaker-UI"
        >Github</a
      >
    </li>
  </ul>