Creating a navigation menu with animations like on Stripe
Only for Vue 3 (changelog)
Install the library in your project:
$ npm i -D vue-stripe-menu
// $ yarn add -D vue-stripe-menu
// $ pnpm add -D vue-stripe-menuImport 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;
}
}<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>| 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 |
| 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 |
| 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 |
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 |
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}> |
| 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) |
| Property | Parameters | Description | Type | Default | Required |
|---|---|---|---|---|---|
| v-model | The state of the open/close the menu | boolean | false | false |
| Name | Parameters | Description |
|---|---|---|
| default | Main content | |
| hamburger | Replace hamburger button | |
| close | Replace close button |
this.$refs[myVsmMobRef].closeDropdown()
| Name | Parameters | Description | Return |
|---|---|---|---|
| closeDropdown | Close dropdown menu |
| Name | Description |
|---|---|
| vsm-mob-show | Show HTMLElements in mobile design |
| vsm-mob-hide | Hide HTMLElements in mobile design |
Please make sure to read the Contributing Guide before making a pull request.
Detailed changes for each release are documented in the CHANGELOG.md.
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent