Need help with vue-dock-menu?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

prabhuignoto
227 Stars 15 Forks MIT License 155 Commits 3 Opened issues

Description

⚓Dockable Menu bar for Vue

Services available

!
?

Need anything else?

Contributors list

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.

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.

  :items="items"
  dock="RIGHT"

📡 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.
{
  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" },
]
  
    :items="items"
    dock="BOTTOM"
  

🎨 Custom color scheme

use the

theme
prop to customize the colors of the menu bar.
  

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-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" }]}, ] } } });

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/

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.