Side menu

Properties

• Menu title
• Menu items

Shoelace

https://shoelace.style/components/drawer

<sl-drawer label="Drawer" class="drawer-overview">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <sl-button slot="footer" variant="primary">Close</sl-button>
</sl-drawer>

<sl-button>Open Drawer</sl-button>

<script>
  const drawer = document.querySelector('.drawer-overview');
  const openButton = drawer.nextElementSibling;
  const closeButton = drawer.querySelector('sl-button[variant="primary"]');

  openButton.addEventListener('click', () => drawer.show());
  closeButton.addEventListener('click', () => drawer.hide());
</script>

vue-dsfr

https://vue-dsfr.netlify.app/?path=/docs/composants-dsfrsidemenu--docs

<template>
  <DsfrSideMenu
    :heading-title="headingTitle"
    :buttonLabel="buttonLabel"
    :menu-items="menuItems"
    @toggle-expand="toggleExpand"
  />
</template>

Vuetify

https://vuetifyjs.com/en/components/navigation-drawers/

<v-navigation-drawer :width="286">
  <v-list-item title="My Application" subtitle="Vuetify"></v-list-item>
  <v-divider></v-divider>
  <v-list-item link title="List Item 1"></v-list-item>
  <v-list-item link title="List Item 2"></v-list-item>
  <v-list-item link title="List Item 3"></v-list-item>
</v-navigation-drawer>