User Manual

Menu-item

This component is very contextual and is mainly used in the menu tab bar. This represents a link to a page or a view. It has an active state where it indicates which page is active. It should not be used outside of its context

Default

Overzicht 

    
      

  

<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>

Modifiers

  • a-menu-item__icon--active

    Use this modifier on the icon within the component to indicate which is the active one to display if the page is active.

States

  • is-active

    Change the state of the component to a more active one, where the general display of the icon or its theme will change.