https://github.com/gijsroge/vue-responsive-menu
A renderless Vue component that will auto detect if menu items don't fit and moves them to a separate dropdown. Also known as the Priority+ pattern.
https://github.com/gijsroge/vue-responsive-menu
Last synced: 4 months ago
JSON representation
A renderless Vue component that will auto detect if menu items don't fit and moves them to a separate dropdown. Also known as the Priority+ pattern.
- Host: GitHub
- URL: https://github.com/gijsroge/vue-responsive-menu
- Owner: gijsroge
- Created: 2020-01-16T15:36:37.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-02-15T16:53:02.000Z (4 months ago)
- Last Synced: 2025-02-15T17:31:17.179Z (4 months ago)
- Language: SCSS
- Homepage: https://vue-responsive-menu.netlify.com/
- Size: 4.2 MB
- Stars: 12
- Watchers: 1
- Forks: 0
- Open Issues: 43
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://vue-responsive-menu.netlify.com/)
# A responsive menu build for Vue.js
A renderless Vue component that will auto detect if menu items don't fit and moves them to a separate dropdown. Also known as the Priority+ pattern.
[](https://vue-responsive-menu.netlify.com/)
## 👉 **[Demo](https://vue-responsive-menu.netlify.com/)** 👈
---
### Install
`yarn add vue-responsive-menu`
### Register as a Vue component
```javascript
import VueResponsiveMenu from "vue-responsive-menu";
export default {
components: {
VueResponsiveMenu
}
};
```
### Pass your menu in the `:nav` prop
Responsive menu will expose 2 new arrays in the default prop, **1 normal menu** & **1 with the excess items**
```html
-
{{ item.name }}
-
{{ menuItems.length === 0 ? '☰' : 'more ↓' }}
import VueResponsiveMenu from 'vue-responsive-menu'
export default {
components: {
VueResponsiveMenu
}
data() {
return {
navigation: [
{ label: 'This', id: 1, link: '#1' },
{ label: 'is an', id: 2, link: '#2' },
{ label: 'example', id: 3, link: '#3' },
{ label: 'navigation', id: 4, link: '#4' },
{ label: 'with many', id: 5, link: '#5' },
{ label: 'many', id: 6, link: '#5' },
{ label: 'many', id: 7, link: '#5' },
{ label: 'many', id: 8, link: '#5' },
{ label: 'items', id: 9, link: '#6' }
]
}
}
}
```
### Props
| Prop | Type | Default | Description |
| -------------- | --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------ |
| :nav | `array` | `[]` |
| :maxCharacters | `number` or `boolean` | `false` |
| label | `string` | `'label'` | Key to read the menu item label. Only needed if you enable maxCharacters. |
| offset | `number` | `0` | Adds x amount of pixels to the total width of menu items. This causes menu items to be moved more quickly to the more dropdown |
### Events
| Name | Payload | Description |
| ----------------- | -------- | -------------------------------- |
| @menu-resized | `number` | current width of menu |
| @item-to-dropdown | `object` | Item from nav prop |
| @item-to-menu | `object` | Item from nav prop |
| @moreMenuItems | `array` | Current array of more menu items |
| @menuItems | `array` | Current array of menu items |
### Example with options
```html
```
### Todo
- [x] Make a public example site
- [x] Create GIF in documentation
- [x] Add documentation
- [x] Write tests
- [x] Setup CI
- [ ] Add contribution guidelines