User Manual

Menu

The main menu or navigational component. The component changes drastically on smaller screen sizes. On desktop it should be displayed on the left side of the view, while on touch devices it is displayed on the bottom like a tabbar on an app. It makes use of different components like the menu-item or the main-action to create the main navigation of the site on desktop and touch devices.

Default


    
      

  

<nav class="o-menu ">
  <div class="o-menu__container">
    <div class="o-menu__logo u-tablet-hide">
      
  <a href="" class="a-logo ">
    <img class="a-logo__image" src="/assets/general/img/logos/logo-nibc.png" alt="NIBC" title="NIBC" />
  </a>

    </div>

    <ul class="o-menu__list">
      <li class="o-menu__item">
        

<div class="a-menu-item ">
  <a
    href=""
    class="a-menu-item__link "
    
  >
  </a>

  

    <div class="a-menu-item__visual">
      <span class="a-menu-item__icon icon-grid"></span>
      <span class="a-menu-item__icon a-menu-item__icon--active icon-grid-filled"></span>
    </div>

  

  

  <span class="a-menu-item__text">Overzicht</span>
</div>


      </li>

      <li class="o-menu__item">
        

<div class="a-menu-item ">
  <a
    href=""
    class="a-menu-item__link "
    
  >
  </a>

  

    <div class="a-menu-item__visual">
      <span class="a-menu-item__icon icon-bell"></span>
      <span class="a-menu-item__icon a-menu-item__icon--active icon-bell-filled"></span>
    </div>

  

  
    

<span class="a-badge a-menu-item__badge">
  5
</span>


  

  <span class="a-menu-item__text">Notificaties</span>
</div>


      </li>

      <li class="o-menu__item o-menu__main-action">
        

<div class="a-menu-item u-tablet-hide">
  <a
    href=""
    class="a-menu-item__link js-overlay-trigger"
    data-overlay-target="overlay-overbooking-main"
  >
  </a>

  

    <div class="a-menu-item__visual">
      <span class="a-menu-item__icon icon-transfer"></span>
      <span class="a-menu-item__icon a-menu-item__icon--active icon-transfer-filled"></span>
    </div>

  

  

  <span class="a-menu-item__text">Overboeking</span>
</div>



        

<a
  class="a-main-action icon-transfer u-tablet-show js-overlay-trigger"
  href=""
  data-overlay-target="overlay-overbooking-main"
></a>


      </li>

      <li class="o-menu__item">
        

<div class="a-menu-item ">
  <a
    href=""
    class="a-menu-item__link "
    
  >
  </a>

  

    <div class="a-menu-item__visual">
      <span class="a-menu-item__icon icon-settings"></span>
      <span class="a-menu-item__icon a-menu-item__icon--active icon-settings-filled"></span>
    </div>

  

  

  <span class="a-menu-item__text">Instellingen</span>
</div>


      </li>

      <li class="o-menu__item">
        

<div class="a-menu-item ">
  <a
    href=""
    class="a-menu-item__link "
    
  >
  </a>

  

    <div class="a-menu-item__visual">
      <span class="a-menu-item__icon icon-more"></span>
      <span class="a-menu-item__icon a-menu-item__icon--active icon-more-filled"></span>
    </div>

  

  

  <span class="a-menu-item__text">Meer</span>
</div>


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