⚓Dockable Menu bar for Vue

Overview

logo

Build Status DeepScan grade DeepSource Codacy Badge Language grade: JavaScript Depfu Known Vulnerabilities https://badgen.net/bundlephobia/minzip/vue-dock-menu

demo

Features

  •  Dock your menu with ease.
  • 🤏  Dock the Menubar by dragging and dropping to the edges of the screen.
  • 👆  Touch support.
  • 👍  Support for nested menus up to any levels.
  • 👓   The Menus adjust to any docked position and enables an intuitive menu navigation.
  •   Keyboard Accessible.
  • 🎨   Icon support.
  •   Zero dependencies.
  • 💪   Built with Typescript.
  • 🧰   Intuitive API with data driven behavior.
  • 🌠   Built with the all new Vue 3.

Table of Contents

Installation

yarn install vue-dock-menu

🚀 Getting Started

vue-dock-menu has some great defaults. Please check the prop section for all available options.

The following snippet creates a simple Menubar and docks it to the top of the page.

">
<template>
  <vue-dock-menu :items="items">
  </vue-dock-menu>
</template>

<script>
import { DockMenu } from "vue-dock-menu";
import "vue-dock-menu/dist/vue-dock-menu.css";

export default {
  name: "example",
  components: {
    DockMenu
  },
  data() {
    return {
      items = [
        {
          name: "File",
          menu: [{ name: "Open"}, {name: "New Window"}, {name: "Exit"}]
        },
        {
          name: "Edit",
          menu: [{ name: "Cut"}, {name: "Copy"}, {name: "Paste"}]
        }
      ]
    }
  }
}
</script>

sample1

Props

Name Description Default
dock default docking position. Can be any one of TOP, LEFT, RIGHT, BOTTOM TOP
on-selected Callback that will be called on a menu item selection
items Data for the Menu bar []
theme prop to customize the color theme
draggable enables/disbales dragging on the menubar. True

Dock

use the dock prop to dock the menubar to your preferred position. The prop can accept the following values TOP, BOTTOM, LEFT, RIGHT.

Here we dock the Menu bar to the right side of the screen.

">
<vue-dock-menu>
  :items="items"
  dock="RIGHT"
</vue-dock-menu>

📡 on-selected

The on-selected prop is used to retrieve the selected menu item. The callback receives an object with name and a path property.

  • name - Name of the selected menu item.
  • path - Full path of the selected menu item.

if you select the Copy menu item under the Edit menu, below would be the payload received on the on-selected callback.

copy" } ">
{
  name: "Copy",
  path: "edit>copy"
}

Populating Menu

Use the items prop to create Simple or Nested menus of your liking.

Here we create a simple Menu structure with 3 Menu items with Edit and Open Recent having sub menus.

  • To include a divider, set an empty item object with just a isDivider property set to true.
  • To disable an item, set disable to true.
const items = [
  { name: "New" },
  { isDivider: true },
  {
    name: "Edit",
    menu: {
      name: "edit-items",
      disable:  true
    },
  },
  { isDivider: true },
  {
    name: "Open Recent",
    menu: {
      name: "recent-items",
    },
  },
  { isDivider: true },
  { name: "Save", disable: true },
  { name: "Save As..." },
  { isDivider: true },
  { name: "Close" },
  { name: "Exit" },
]
">
  <vue-dock-menu>
    :items="items"
    dock="BOTTOM"
  </vue-dock-menu>

🎨 Custom color scheme

use the theme prop to customize the colors of the menu bar.

">
  <menu-bar
    :items="items"
    :on-selected="selected"
    :theme="{
      primary: '#001B48',
      secondary: '#02457a',
      tertiary: '#018abe',
      textColor: '#fff'
    }"
  />

theme

🎭 Icon support

Each menu item can be iconified and the component uses slots to inject the icons.

Pass individual icons (or images) as templates marked with a unique slot id. please make sure the ids match the iconSlot property in the items array.

export default defineComponent({ name: "MenuExample", data() { return { items: [ { name: "New File", iconSlot: "file" }, { name: "New Window", iconSlot: "window" }, ] } } }) ">
<menu-bar
  :items="items"
  :on-selected="selected"
>
  <template #file>
    <img
      src="../assets/file.svg"
      alt="file"
      :style="style"
    >
  </template>
  <template #window>
    <img
      src="../assets/window-maximize.svg"
      alt="file"
      :style="style"
    >
  </template>
</menu-bar>

export default defineComponent({
  name: "MenuExample",
  data()  {
    return {
      items: [
        { name: "New File", iconSlot: "file" },
        { name: "New Window", iconSlot: "window" },
      ]
    }
  }
})

menu-icon

This works seamlessly even for nested menu structure. Make sure the slot ids match and the component will render the icons appropriately.

export default defineComponent({ name: "MenuExample", data() { return { items: [ { name: "New File", subMenu: [{ name: "New Window", iconSlot: "window" }]}, ] } } }); ">
<menu-bar
  :items="items"
  :on-selected="selected"
>
  <template #window>
    <img
      src="../assets/window-maximize.svg"
      alt="file"
      :style="style"
    >
  </template>
</menu-bar>

export default defineComponent({
  name: "MenuExample",
  data()  {
    return {
      items: [
        { name: "New File",
        subMenu: [{ name: "New Window", iconSlot: "window" }]},
      ]
    }
  }
});

What's coming next

  • support for react.
  • accordion style rendering on sidebar mode.

📦 Build Setup

# install dependencies
yarn install

# start dev
yarn run dev

# package lib
npm run rollup

# run css linting
yarn run lint:css

🔨 Contributing

  1. Fork it ( https://github.com/prabhuignoto/vue-dock-menu/fork )
  2. Create your feature branch (git checkout -b new-feature)
  3. Commit your changes (git commit -am 'Add feature')
  4. Push to the branch (git push origin new-feature)
  5. Create a new Pull Request

🧱 Built with

📄 Notes

  • The project uses vite instead of @vue/cli. I choose vite for speed and i also believe vite will be the future.

Meta

Prabhu Murthy – @prabhumurthy2[email protected]

https://www.prabhumurthy.com

Distributed under the MIT license. See LICENSE for more information.

https://github.com/prabhuingoto/

Issues
  • npm run error: [vite] Failed to resolve module import.....

    npm run error: [vite] Failed to resolve module import.....

    I just run "npm i" and "npm run dev", and it's output: "[vite] Failed to resolve module import "vue/dist/vue.runtime.esm-bundler.jsode_modules uedist ue.runtime.esm-bundler.js". (imported by /src/App.vue)" 图片

    How can I fix it? thanks.

    bug 
    opened by guolaopi 7
  • More than two items with menu will be error.

    More than two items with menu will be error.

    More than two items with menu will be error. It will show two menus at the same time.

    See as the following picture. image

    Did I miss some settings? Please tell me if I am wrong.
    Thank you very much.

    bug 
    opened by lizzyliao 3
  • Help: Adding menu items with custom properties

    Help: Adding menu items with custom properties

    You are planning to have icons in menu. I assume this would a property on each item to define an icon or not.

    Can we have other custom properties on menu like hidden or a function to define its visibility url to be used when item is passed on selected function with those properties.

    This functionality might already be there and if it is it would be good to have an example of some common scenarios like:

    1. Attach a url to menu item and set it to open in new tab or window

    2. Hide certain menu items or disable them from being selected.

    Thanks a lot for such a nice component.

    enhancement good first issue 
    opened by farrukhsubhani 2
  • Shouldn't it be onUnmounted() to call removeEventListener function?

    Shouldn't it be onUnmounted() to call removeEventListener function?

    https://github.com/prabhuignoto/vue-dock-menu/blob/956938189d56c0b01bc6fd1bae08c08be5b11627/src/components/MenuBar.vue#L152

    opened by SamuelLaheux 1
  • Update all Yarn dependencies (2020-12-07)

    Update all Yarn dependencies (2020-12-07)

    This is your weekly update of all Yarn dependencies. Please take a good look at what changed and the test results before merging this pull request.

    What changed?

    ✳️ eslint (7.14.0 → 7.15.0, minor) · Repo · Changelog · Release · Diff

    ✳️ eslint-plugin-vue (7.1.0 → 7.2.0, minor) · Repo · Release · Diff

    ✳️ sass (1.29.0 → 1.30.0, minor) · Repo · Changelog · Release · Diff

    ✳️ lint-staged (10.5.2 → 10.5.3, patch) · Repo · Release · Diff


    Depfu Status

    Depfu will only send you the next scheduled PR once you merge or close this one.

    All Depfu comment commands
    @​depfu refresh
    Rebases against your default branch and redoes this update
    @​depfu recreate
    Recreates this PR, overwriting any edits that you've made to it
    @​depfu merge
    Merges this PR once your tests are passing and conflicts are resolved
    @​depfu close
    Closes this PR and deletes the branch
    @​depfu reopen
    Restores the branch and reopens this PR (if it's closed)
    depfu 
    opened by depfu[bot] 0
  • Update all Yarn dependencies (2021-04-05)

    Update all Yarn dependencies (2021-04-05)

    This is your weekly update of all Yarn dependencies. Please take a good look at what changed and the test results before merging this pull request.

    What changed?

    ✳️ @vue/compiler-sfc (3.0.10 → 3.0.11, patch) · Repo · Changelog · Release · Diff

    ✳️ vue (3.0.10 → 3.0.11, patch) · Repo


    Depfu Status

    Depfu will only send you the next scheduled PR once you merge or close this one.

    All Depfu comment commands
    @​depfu refresh
    Rebases against your default branch and redoes this update
    @​depfu recreate
    Recreates this PR, overwriting any edits that you've made to it
    @​depfu merge
    Merges this PR once your tests are passing and conflicts are resolved
    @​depfu close
    Closes this PR and deletes the branch
    @​depfu reopen
    Restores the branch and reopens this PR (if it's closed)
    depfu 
    opened by depfu[bot] 0
  • Update all Yarn dependencies (2021-03-29)

    Update all Yarn dependencies (2021-03-29)

    This is your weekly update of all Yarn dependencies. Please take a good look at what changed and the test results before merging this pull request.

    What changed?

    ✳️ @vitejs/plugin-vue (1.1.5 → 1.2.0, minor) · Repo · Changelog

    ✳️ eslint (7.22.0 → 7.23.0, minor) · Repo · Changelog · Release · Diff

    ✳️ @rollup/plugin-node-resolve (11.2.0 → 11.2.1, patch) · Repo

    ✳️ @vue/compiler-sfc (3.0.7 → 3.0.9, patch) · Repo · Changelog · Release · Diff

    ✳️ vite (2.1.2 → 2.1.3, patch) · Repo · Changelog · Diff

    ✳️ vue (3.0.7 → 3.0.9, patch) · Repo


    Depfu Status

    Depfu will only send you the next scheduled PR once you merge or close this one.

    All Depfu comment commands
    @​depfu refresh
    Rebases against your default branch and redoes this update
    @​depfu recreate
    Recreates this PR, overwriting any edits that you've made to it
    @​depfu merge
    Merges this PR once your tests are passing and conflicts are resolved
    @​depfu close
    Closes this PR and deletes the branch
    @​depfu reopen
    Restores the branch and reopens this PR (if it's closed)
    depfu 
    opened by depfu[bot] 0
  • deactivate top menu bar when mouse leaves

    deactivate top menu bar when mouse leaves

    The code left the menu item highlighted when the mouse clicked other element on the screen. This fixes the top menu item to be deactivates when the mouse leaves the menu bar and other elements are clicked.

    The active menu is preserved when the mouse simply moves away from the menu, but deactivates when the mouse is clicked on other part of the screen.

    opened by sunhwan 0
  • 🔨 fixes #23

    🔨 fixes #23

    fixes an issue #23 where the sub menu's on the same level open at the same time.

    opened by prabhuignoto 0
  • Update all Yarn dependencies (2020-12-28)

    Update all Yarn dependencies (2020-12-28)

    This is your weekly update of all Yarn dependencies. Please take a good look at what changed and the test results before merging this pull request.

    What changed?

    ✳️ @typescript-eslint/eslint-plugin (4.9.1 → 4.11.0, minor) · Repo · Changelog · Release · Diff

    ✳️ @typescript-eslint/parser (4.9.1 → 4.11.0, minor) · Repo · Changelog · Release · Diff

    ✳️ eslint (7.15.0 → 7.16.0, minor) · Repo · Changelog · Release · Diff

    ✳️ @rollup/plugin-node-resolve (11.0.0 → 11.0.1, patch) · Repo


    Depfu Status

    Depfu will only send you the next scheduled PR once you merge or close this one.

    All Depfu comment commands
    @​depfu refresh
    Rebases against your default branch and redoes this update
    @​depfu recreate
    Recreates this PR, overwriting any edits that you've made to it
    @​depfu merge
    Merges this PR once your tests are passing and conflicts are resolved
    @​depfu close
    Closes this PR and deletes the branch
    @​depfu reopen
    Restores the branch and reopens this PR (if it's closed)
    depfu 
    opened by depfu[bot] 0
  • on-selected never get out the active on root menu

    on-selected never get out the active on root menu

    Describe the bug The "on-selected" props never get out the active on root menu but just the div below.

    To Reproduce Steps to reproduce the behavior:

    I bind the methods on the "on-select" and also the menu items:

      <dock-menu :items="items" :on-selected="selected"></dock-menu>
    

    In my method I just route to another place

      methods: {
        selected(item) {
          router.push(item.name);
        },
      },
    

    The menu close but but root "Menu" stay active. I need to click twice to re-open the "Menu" path (image below) image

    Expected behavior After the "on-selected" is call the root menu can be accessible in one click

    Desktop (please complete the following information):

    • OS: Windows
    • Browser: Chrome
    • Version 90.0.4430.93 (Build officiel) (64 bits)

    edit: Version of "vue-dock-menu": "^1.0.3"

    bug 
    opened by Patfreeze 0
Releases(1.0.3)
Owner
Prabhu Murthy
Fullstack Engineer & Architect
Prabhu Murthy
⚓Dockable Menu bar for Vue

⚓Dockable Menu bar for Vue

Prabhu Murthy 198 Jun 3, 2021
:desktop_computer: UI file/toolbar menus for Vue apps

Features ?? See live demo Reactive content is stored in Vue.js computed/data fields, not in template Easy styling Add your own custom components for m

Romain Lamothe 75 Jun 2, 2021
Creating a navigation menu with animations like on Stripe

Vue Stripe Menu Create a dropdown like on Stripe Demo Project How to install Install the library in your project $ npm i vue-stripe-menu // or $ yarn

Alexey Khrushch 303 Jun 3, 2021
Vue component for fast create simple menu block

Vue simple menu Vue component for fast create simple menu block I will be glad to correct the inaccuracy of the my English ?? Описание на русском язык

RG.RU 33 May 2, 2021
Menu/Contextmenu Component for vue2

vue-menu Introduction Recent web technologies focus on mobile environments. UIs premised on mouse operation such as window, context-menu, nested-menu

Koike Michitaro 230 Jun 3, 2021
🧭 A simple, pretty navbar for your Vue projects.

vue-navigation-bar A simple, pretty navbar for your Vue projects. Links View demo View on npm View on GitHub Install Download # npm npm i vue-navigati

John Datserakis 108 May 7, 2021
🍔 An off-canvas sidebar Vue component - https://vue-burger-menu.netlify.com/

vue-burger-menu An off-canvas sidebar Vue component with a collection of effects and styles using CSS transitions and SVG path animations. Demo & exam

Mohit kumar Bajoria 675 Jun 1, 2021
Dropdown menu plugin for vuejs, supported ssr.

Customizable dropdown menu plugin for vuejs. SSR supported. ✨ Demo: https://v-dropdown-menu.now.sh ?? NPM: https://www.npmjs.com/package/v-dropdown-me

RadKod 18 Apr 27, 2021
A simple hands-on mobile nested menu UI component with a smooth slide animation

vue-nested-menu A simple hands-on mobile nested menu UI component with a smooth slide animation. demo Installation Yarn / NPM $ yarn add vue-nested-me

guAnsunyata 34 Apr 10, 2021
This is web navigation component base on vue2.0+. It can be used in both PC and mobile.

vue-quick-menu This is web navigation component base on vue2.0+. It can be used in both PC and mobile. demo Installation npm install vue-quick-menu -

Ashley Lv 213 May 16, 2021
SelectMenu for Vuejs, A simple, easier and highly customized menu solution

v-selectmenu SelectMenu for Vuejs, A simple, easier and highly customized menu solution Examples and Documentation Live Examples on CodePen, more exam

Terry Zeng 172 May 23, 2021
Simple vue implementation of Slideout.js touch sidebar / sidemenu library

vue-slideout This component is a simple vue implementation of Slideout.js Demo Install npm install vue-slideout Usage App.vue <template> <div id=

null 155 May 9, 2021
Navigation tree menu component with nice integration with vue-router

vue-tree-nav Navigation tree menu component with nice integration with vue-router Ready out of the box! Side bar with infinite depth Links and dropdow

Marco Tomic 22 Feb 22, 2021
Dropdown menu component for Vue

Dropdown menu Universal dropdown menu component for Vue. Any element can be dropdown trigger and anything can be dropdown content. Fully customizable

Innologica Ltd 35 May 12, 2021