🍷 Digital Wine Cellar – Pattern Library

Menu trigger 

<label for="menu-trigger">
    <svg class="icon " height="20" width="20" aria-hidden="true">
        <use xlink:href="../../sprite.svg#menu" />
    </svg>
    Menu
</label>
 
<label for="menu-trigger">
  {{> @svg icon="menu"}}
  Menu
</label>
 
/* No context defined. */
  • Content: 
    /**
 * Menu trigger
 */

@media screen {

  #menu-trigger {
    display: none;
  }

  /* Menu trigger "button" */
  label[for="menu-trigger"] {
    display: flex;
    align-items: center;
    font-weight: 400;
  }

  label[for="menu-trigger"] .icon {
    margin-right: 0.25em;
  }
}
  • URL: /components/raw/menu-trigger/menu-trigger.css
  • Filesystem Path: components/02_molecules/menu-trigger/menu-trigger.css
  • Size: 283 Bytes

Menu trigger

Is a vital component to be used together with @off-screen-menu. Relies on the CSS :checked selector to trigger the slide-in effect of said component. Completely useless on its own.