vue-stripe-menu-dropdown

Create A Navigation Menu With Animations Like On Stripe for Vue.js

by

Vue Stripe Menu creates a navigation menu with animations like Stripe.

user clickable or hover dropdown menu, custom stripe menu, ul li dropdown stripe menu, menu dropdown hover effects, beautiful dropdown menu

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-stripe-menu

# NPM
$ npm install vue-stripe-menu --save

1. Install and import the tape menu.

import Vue from 'Vue'
import VueStripeMenu from 'vue-stripe-menu'
import 'vue-stripe-menu/dist/vue-stripe-menu.css'

2. Register the component.

Vue.use(VueStripeMenu)

3. Insert the bar menu component into your template.

<template>
  <vsm-menu
    :menu="menu"
    @open-dropdown="onOpenDropdown"
    @close-dropdown="onCloseDropdown"
  >
    <li
      slot="before-nav"
      class="vsm-section"
    >
      <stripe-logo />
    </li>
    <!--Add a title using the slot:-->
    <!--<template #title="data">{{ data.item.title }}</template>-->
    <template #default="data">
      <component
        :is="data.item.content"
        class="content"
      />
      <component
        :is="data.item.secondary"
        class="content--secondary"
      />
    </template>
    <li
      slot="after-nav"
      class="vsm-section"
    >
      Sign In
    </li>
  </vsm-menu>
</template>

4. Select menu items.

export default {
  components: {
    StripeLogo
  },
  data () {
    return {
      menu: [
        { title: 'Company', dropdown: 'company', content: DefaultContent, listeners: { mouseover: this.onMouseOver } },
        { title: 'Developers', dropdown: 'developers', content: HorizontalPrimaryContent, secondary: HorizontalSecondaryContent },
        { title: 'Products', dropdown: 'products', content: VerticalContent, element: 'span' },
        { title: 'Source', attributes: { href: 'app.vue', target: '_blank' } }
      ]
    }
  },
  methods: {
    onMouseOver (evt) {
      // console.log('mouse over', evt)
    },
    onOpenDropdown (el) {
      // console.log('open dropdown', el)
    },
    onCloseDropdown (el) {
      // console.log('close dropdown', el)
    }
  }
}

Stripe-like Dropdown Menu, Vue Stripe Menu Plugin/Github

See Demo And Download

Demo
Download

Official Website(Alexeykhr): Click Here

This superior jQuery/javascript plugin is developed by Alexeykhr. For extra Advanced Usages, please go to the official website.

Leave a Comment