Vue Stripe Menu

Creating a navigation menu with animations like on Stripe

Only for Vue 3 (changelog)

Documentation

Vue 2 - Branch

How to install

Install the library in your project:

$ npm i -D vue-stripe-menu

// $ yarn add -D vue-stripe-menu
// $ pnpm add -D vue-stripe-menu

Import components:

// >>> Install globally - .js file <<<

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

createApp({}).use(VueStripeMenu)

// >>> Install locally - .vue file <<<

import { VsmMenu, VsmMob } from 'vue-stripe-menu'

export default {
  components: {
    VsmMenu, VsmMob
  }
}

// Optionally if you don't want to use @import in your
// <style> section (because its scoped for example):
// import 'vue-stripe-menu/css'

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 css/scss styles:

// >>> SCSS style (required sass-loader, node-sass) <<<
// https://github.com/oleksiikhr/vue-stripe-menu/blob/main/src/scss/_variables.scss
// $vsm-transition: .5s;

@import "~vue-stripe-menu/scss";

// >>> CSS style <<<
// @import '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;
  }
}

Full Example

<template>
  <vsm-menu
    :menu="menu"
    element="header"
    handler="hover"
    align="center"
    :screen-offset="10"
    :dropdown-offset="0"
    @open-dropdown="onOpenDropdown"
    @close-dropdown="onCloseDropdown"
  >
    <template #default="{ item }">
      <!--Dropdown content of each menu item with a "dropdown" property-->
      <!--You can replace it with a separate component if each menu item has its own style-->
      <!--Necessarily need to have at least one element within the slot-->
      <!--An alternate background will be applied from the 2nd element-->
      <div style="width: 300px; padding: 30px">
        Header: {{ item }}
      </div>
      <div style="padding: 30px">
        Second element
      </div>
    </template>
    <template #before-nav>
      <!--Image or svg of website logo-->
      <li style="width: 50px; height: 50px">
        <img
          src="https://vuejs.org/images/logo.png"
          alt="My Logo"
        >
      </li>
    </template>
    <template #title="data">
      <!--Display menu items through slots-->
      {{ data.item.title }}
    </template>
    <template #after-nav>
      <!--Mobile Burger, buttons, etc-->
      <li class="vsm-mob-hide">
        <button>My Button</button>
      </li>
      <!--Set "display: block" for the .vsm-mob-show class to display content-->
      <vsm-mob>Mobile Content</vsm-mob>
    </template>
  </vsm-menu>
</template>

<script>
/*
 * Inside #after-nav and #before-nav it is recommended to use
 * to maintain the correct HTML structure:
 *   <li><!--Content--></li>
 */

export default {
  data() {
    return {
      menu: [
        {
          // display menu item (can be overridden with title slot)
          title: 'News',
          // this element now has dropdown content
          dropdown: 'news',
          // don't want a button element? Pass HTMLElement or global component
          // (pass only as a string, component must be globally accessible)
          element: 'span', // div, router-link, nuxt-link, custom-component
          // offset the position of the dropdown menu
          align: 'center',
          // menu item can accept all attributes
          attributes: {
            // I want more classes! No problem
            // string, array, object, not matter
            class: ['my-class1', { 'my-class2': true }],
            // Custom attributes
            'data-big': 'yes'
          },
          // add some events?
          listeners: {
            // all possible native events
            mouseover: (evt) => {
              console.log('news hover', evt)
            }
          },
          // just extra properties in the object
          customAttribute: true,
        },
        {
          title: 'External Link',
          attributes: {
            href: 'https://github.com/oleksiikhr/vue-stripe-menu',
            target: '_blank'
          }
        }
        // ...
      ]
    }
  },
  methods: {
    onOpenDropdown() {
      console.log('onOpenDropdown')
    },
    onCloseDropdown() {
      console.log('onCloseDropdown')
    }
  }
}
</script>

API

[Menu] Props

Property	Parameters	Description	Type	Default	Required
menu	MenuObject	Description of the menu items	array		true
element		HTMLElement for the root element	string	header	false
screen-offset		Offset from the window screen	string, number	header	false
dropdown-offset		Offset from the dropdown menu	string, number	header	false
transition-timeout		Animation speed in ms (equals $vsm-transition scss)	string, number	250	false
handler	hover, click	On what event to open dropdown menu	string	hover	false
align	center, left, right	Offset the position of the dropdown menu	string	center	false

[Menu] Events

Name	Description	Return
open-dropdown	Open the dropdown menu, return the active HTMLElement	HTMLElement
close-dropdown	Close the dropdown menu, return the closed HTMLElement	HTMLElement

[Menu] Slots

Name	Parameters	Description
default	MenuItem, index	The main content for the dropdown list
before-nav	before-nav	Content to the left of the list
after-nav	after-nav	Content to the right of the list
title	MenuItem, index	Replace the output of menu[i].title with your own

[Menu] Methods

this.$refs[myVsmRef].closeDropdown()

Name	Parameters	Description	Return
toggleDropdown	HTMLElement	Open dropdown menu, if it is an active HTMLElement - close
openDropdown	HTMLElement	Open dropdown menu for selected HTMLElement
closeDropdown		Close active dropdown menu
resizeDropdown		Recalculate size and location of dropdown menu

[Menu] Properties

this.$refs[myVsmRef].itemsWithDropdown

Name	Description	Return
itemsWithDropdown	Filtered menu items with "dropdown" property	Array<MenuObject>
elementsWithDropdown	List of HTMLElements that have dropdown content	Array<MenuObject>
dropdownContainerItems	List of dropdown HTMLElements	Array<{el: HTMLElement, name: string, content: HTMLElement}>

[Menu] MenuObject (menu props)

Property	Type	Description
title	string	Menu item name. Can also be redefined through the slot
dropdown	string	Unique value indicates that this item has a dropdown menu
align	string	Offset the position of the dropdown menu (center/left/right)
element	string	HTMLElement or global component in the header element, if not specified, it will be or
attributes	object	All attributes to be assigned in the header element (v-bind)
listeners	object	All events to be assigned in the header element (v-on)

[Mob] Props

Property	Parameters	Description	Type	Default	Required
v-model		The state of the open/close the menu	boolean	false	false

[Mob] Slots

Name	Parameters	Description
default		Main content
hamburger		Replace hamburger button
close		Replace close button

[Mob] Methods

this.$refs[myVsmMobRef].closeDropdown()

Name	Parameters	Description	Return
closeDropdown		Close dropdown menu

Classes

Name	Description
vsm-mob-show	Show HTMLElements in mobile design
vsm-mob-hide	Hide HTMLElements in mobile design

Contributing

Please make sure to read the Contributing Guide before making a pull request.

Changelog

Detailed changes for each release are documented in the CHANGELOG.md.

License

MIT