These changes are applied on the current header and added to the Install section.
# Customize
[Props]
header/div/section or another HTMLElement
hover/click
left/center/right (default value for all elements)
indent a dropdown menu from screen edges (reduce screen size)
indent a dropdown menu from header
animation speed in ms (equals "$vsm-transition" style)
[Styles]
for vsm-menu, empty - no styles
for vsm-menu, empty - no styles
left/center/right, empty - no styles
empty - no adaptive
how far the content moves (inside the dropdown)
background for first element
background from second element
animation speed in ms (equals "transition-timeout" props)
spacing between the links

List of variables
# Install

Install the library:

$ npm i -D vue-stripe-menu
$ yarn add -D vue-stripe-menu
$ pnpm add -D vue-stripe-menu

Import components:

import { createApp } from 'vue';
import VueStripeMenu from 'vue-stripe-menu';

createApp({}).use(VueStripeMenu);

Add the component:

<template>
  <vsm-menu :menu="menu">
    <template #default="{ item }">
      <div style="width: 300px; padding: 30px">
        Dropdown content - {{ item.title }}
      </div>
    </template>
    <template #before-nav>
      <li class="vsm-mob-full">
        Left side
      </li>
    </template>
    <template #after-nav>
      <li class="vsm-mob-hide">
        Right side
      </li>
      <vsm-mob>
        <div style="min-height: 200px; padding: 30px">
          Mobile Content
        </div>
      </vsm-mob>
    </template>
  </vsm-menu>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        { title: 'Item1', dropdown: 'dropdown-1' },
        { title: 'Item2', dropdown: 'dropdown-2' },
        { title: 'Just link', attributes: { href: '#clicked' } },
      ]
    }
  }
}
</script>

Add scss styles:

// >>> SCSS style (required loaders, like sass-loader, node-sass) <<<
// https://github.com/oleksiikhr/vue-stripe-menu/blob/main/src/scss/_variables.scss
@import "~vue-stripe-menu/src/scss/index";

// >>> CSS style <<<
// @import 'vue-stripe-menu/dist/vue-stripe-menu.css';

.vsm-menu {
  max-width: 1024px;
  width: 100%;
  margin: 0 auto;
}

.vsm-nav {
  margin: 0 10px;
}

.vsm-link-container {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .vsm-mob-show {
    display: block;
  }
  .vsm-mob-hide {
    display: none;
  }
  .vsm-mob-full {
    flex-grow: 1;
  }
}