Menu Component

<div class="demo-wrapper">

<!-- Medium variant with combination of anchor/button/custom items -->
<div class="spr-menu-md">
   <button class="spr-menu-item" tabindex="0">Some Button Item</button>
   <button class="spr-menu-item" tabindex="0">Another Button Item</button>
   <a class="spr-menu-item" tabindex="0">Also Anchor</a>
   <a class="spr-menu-item active" tabindex="0">And More Anchor</a>
   <div class="spr-menu-item" role="button" tabindex="0">
     <div style="display: flex; justify-content: space-between">
       <span>Even Custom</span>
       <div class="custom-item">
         😎
       </div>
     </div>
   </div>
</div>

<!-- Small variant with combination of anchor/button/custom items -->
<div class="spr-menu-sm">
   <button class="spr-menu-item" tabindex="0">Some Button Item</button>
   <button class="spr-menu-item" tabindex="0">Another Button Item</button>
   <a class="spr-menu-item" tabindex="0">Also Anchor</a>
   <a class="spr-menu-item active" tabindex="0">And More Anchor</a>
   <div class="spr-menu-item" role="button" tabindex="0">
     <div style="display: flex; justify-content: space-between">
       <span>Even Custom</span>
       <div class="custom-item">
         😎
       </div>
     </div>
   </div>
</div>

</div>
<style>
  .custom-item { width: 30px; border-radius: 10px; background-color: indianred; color: white; text-align: center }
  .demo-wrapper { display: flex; justify-content: space-around; align-items: flex-start }
</style>

@import 'components/menu';