6.0 - Navigation

6.1 - Navigation example

A collection of helper classes that might be useful to be used throughout the application

Default styling

Navigation

.mee-navigation

Horizontal navigation

.mee-navigation-horizontal

<nav class="{$modifiers}">
<ul>
<li><a href="#">Products</a></li>
<li><a href="#">Add</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Logout</a></li>
</ul>
<nav>

6.2 - Mobile menu trigger

A mobile menu trigger only visible on smaller screens

Default styling

<span class="mee-purple-bg mee-menu-trigger"></span>

6.3 - Mobile Navigation example with icons

A collection of helper classes that might be useful to be used throughout the application

Default styling

<header class="mee-header mee-authenticated-header">
  <div class="mee-header-left">
    <a class="mee-logo" href="/"><img src="../public/images/logo.png"></a>
    <span class="mee-menu-trigger" onclick="document.querySelector('.mee-header').classList.toggle('mee-is-open')"></span>
  </div>
  <div class="menu-wrapper">
    <div class="mee-header-middle">
      <nav class="mee-navigation mee-navigation-horizontal">
        <ul>
          <li><a ui-sref="titles"><span class="mee-icon-grid"></span><br>View</a></li>
          <li><a ui-sref="access-code"><span class="mee-icon-add"></span><br>Add</a></li>
          <li class="last"><a ui-sref="logout"><span class="mee-icon-logout"></span><br>Log out</a></li>
        </ul>
      </nav>
    </div>
    <div class="mee-header-right">
      <div class="mee-select mee-white-select mee-vertical-center">
        <translate-dropdown>
          <select name="" id="">
            <option value="">English Yo</option>
            <option value="">Spanish Hola!</option>
            <option value="">Lang 3</option>
            <option value="">Lang 4</option>
          </select>
        </translate-dropdown>
      </div>
    </div>
  </div>
</header>