A customizable multi-level dock menu (dropdown menu) component as you have seen on popular OS like Windows.
Compatible with the latest Vue.js 3 framework.
How to use it:
1. Import the dock menu component.
import { DockMenu } from "vue-dock-menu"; import "vue-dock-menu/dist/vue-dock-menu.css";
2. Add the DockMenu component to the app template and override the default styles using the theme
prop as follows:
<DockMenu :items="items" :on-selected="handleSelected" :theme="{ primary: '#b2b2b2', secondary: '#e5e5e5', tertiary: '#008ecc', textColor: '#000', textHoverColor: '#fff', }" />
3. Register the component and insert your own menu items to the DockMenu.
export default { name: "App", components: { DockMenu, }, setup() { const handleSelected = () => {}; return { handleSelected, }; }, data() { return { count: 0, items: [ { name: "file", menu: [ { name: "New File" }, { name: "New Window" }, { name: "Open File" }, { isDivider: true }, { name: "Preferences", menu: [ { name: "Settings" }, { name: "Themes", menu: [ { name: "White", menu: [{ name: "white 1" }, { name: "white 2" }], }, { name: "Black", }, ], }, ], }, { name: "Open Workspace" }, { isDivider: true }, { name: "Save" }, { name: "Save As..." }, { isDivider: true }, { name: "Close" }, { name: "Exit" }, ], }, { name: "edit", menu: [ { name: "Undo" }, { name: "Redo" }, { isDivider: true }, { name: "Cut" }, { name: "Copy" }, { name: "Paste" }, { isDivider: true }, { name: "Find" }, { name: "Replace" }, ], }, { name: "View", menu: [ { name: "Explorer" }, { name: "Search" }, { name: "Run" }, { isDivider: true }, { name: "Apperance", menu: [{ name: "Full Screen" }, { name: "Zen Mode" }], }, ], }, { name: "Help", menu: [{ name: "About" }, { name: "Check for Updates" }], }, ], }; }, };
4. All default component props.
items: { type: Array as PropType<MenuItemModel[]>, default: [] as MenuItemModel[], required: true, }, dock: { required: false, default: MenuBarDockPosition.TOP, type: String, }, parent: { required: false, default: "", type: String, }, theme: { required: true, type: Object as PropType<MenuTheme>, }, isMobile: { type: Boolean, default: false, }, nested: { type: Boolean, default: false, }, onSelected: { required: true, type: Function as PropType< ({ name, path }: { name: string; path: string }) => void >, }, initialHighlightIndex: { required: false, type: Number, default: -1, },
Preview:
Changelog:
v1.1.0 (07/15/2022)
- update package
v1.1.0 (11/22/2021)
- fixing sub menu issue
v1.0.3 (03/24/2021)
- Fixes a bug where the Menu Bar was highlighted even after losing focus
v1.0.2 (01/16/2021)
- Fixed More than one sub menu open at the same time
v1.0.2 (01/13/2021)
- Fixed deepsource issues
v1.0.1 (12/18/2020)
- Fixes an issue where the drag would not function correctly.
- New prop to control the sidebar width when docked to left or right.
v1.0.0 (12/14/2020)
- Touch support
- Miscellaneous bug fixes
v0.3.1 (12/12/2020)
- Support for Icons
v0.2.2 (12/01/2020)
- support for disabling menu items.
Download Details:
Author: prabhuignoto
Live Demo: https://codesandbox.io/s/nifty-bhaskara-nxbum?fontsize=14&hidenavigation=1&theme=dark
Download Link: https://github.com/prabhuignoto/vue-dock-menu/archive/master.zip
Official Website: https://github.com/prabhuignoto/vue-dock-menu
Install & Download: