Navigation

Top navigation components

Basic Navigation

A basic horizontal navigation typically used at the top of the page

Example Code

  <nav class="basic">
    <ul>
      <li class="active"><a href='#'>Home</a></li>
    </ul>

    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Service</a></li>
      <li><a href="#">Products</a></li>
    </ul>
  </nav>

Two-level Navigation

A two-level navigation with nested menu items or second-level navigation

Example Code

  <nav class="basic">
    <ul>
      <li class="active"><a href='#'>Home</a></li>
      <li><a href='#'>Profile</a></li>
      <li><a href='#'>Setting</a></li>
    </ul>

    <ul>
      <li><a href='#'>View</a></li>
      <li><a href='#'>Grid</a></li>
      <li><a href='#'>List</a></li>
    </ul>

    <div class="flex-stretch">
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Service</a></li>
      <li><a href="#">Products</a></li>
      <li>
          <details class="dropdown">
            <summary>
              Account
            </summary>
            <ul>
              <li><a href="#">Profile</a></li>
              <li><a href="#">Settings</a></li>
              <li><a href="#">Security</a></li>
              <li><a href="#">Logout</a></li>
            </ul>
          </details>
      </li>

    </ul>
    </div>
  </nav>