Vue Float Menu 🎯

✨ Features

• 🎯 Drag & Drop - Freely position your menu anywhere on screen
• 🧠 Smart Positioning - Automatic edge detection and menu flipping
• 🌳 Nested Menus - Support for complex menu hierarchies
• ⌨️ Keyboard Accessible - Full keyboard navigation support
• 📱 Touch Optimized - Enhanced mobile experience (Touch Guide)
• ⚡ Performance - Optimized bundle size (Bundle Guide)
• 🎨 Customizable - Extensive theming options
• 🛠 TypeScript - Built with type safety
• 🎭 Vue 3 - Leverages the latest Vue.js features
• 📦 Tree-shakeable - Only import what you need

📚 Table of Contents

• Installation
• Quick Start
• Documentation
  • Props
  • Positioning
  • Menu Configuration
  • Styling
  • Events
  • Theming
• Examples
• Development
• Contributing
• License

⚡ Installation

# Using npm
npm install vue-float-menu

# Using yarn
yarn add vue-float-menu

# Using pnpm
pnpm add vue-float-menu

🚀 Quick Start

<template>
  <float-menu position="top left" :dimension="50" :menu-data="items" @select="handleSelection">
    <template #icon>
      <BoxIcon />
    </template>
  </float-menu>
</template>

<script setup>
import { FloatMenu } from 'vue-float-menu';
import 'vue-float-menu/dist/vue-float-menu.css';

const items = [
  { name: 'New' },
  {
    name: 'Edit',
    subMenu: {
      name: 'edit-items',
      items: [{ name: 'Copy' }, { name: 'Paste' }],
    },
  },
  { name: 'Open Recent' },
  { name: 'Save' },
];

const handleSelection = (selectedItem) => {
  console.log('Selected:', selectedItem);
};
</script>

📖 Documentation

Props

| Prop | Type | Default | Description | | ---------------- | --------- | ----------------------------- | ------------------------------------------------------------------------- | | dimension | number | 50 | Size of menu head in pixels | | position | string | 'top left' | Initial position (top left, top right, bottom left, bottom right) | | fixed | boolean | false | Disable dragging and fix position | | menu-dimension | object | { width: 200, height: 300 } | Menu dimensions | | menu-data | array | [] | Menu structure data | | menu-style | string | 'slide-out' | Menu style (slide-out' or accordion) | | flip-on-edges |boolean|false | Auto-flip menu on screen edges | |theme |object |{}` | Custom theme configuration |

Positioning

The menu can be positioned in four corners of the screen:

<float-menu position="bottom right">
  <template #icon>
    <BoxIcon />
  </template>
</float-menu>

Menu Configuration

Configure menu dimensions and style:

<float-menu :dimension="50" :menu-dimension="{ width: 300, height: 400 }" menu-style="accordion">
  <template #icon>
    <BoxIcon />
  </template>
</float-menu>

Styling

Two menu styles are available:

1. Slide-out (default)
2. Accordion (mobile-friendly)

Theming

Customize the appearance with the theme prop:

<float-menu
  :theme="{
    primary: '#00539C',
    textColor: '#000',
    menuBgColor: '#fff',
    textSelectedColor: '#fff',
  }"
>
  Click
</float-menu>

🛠 Development

# Install dependencies
pnpm install

# Start development server
pnpm run dev

# Run linting
pnpm run lint:all

# Build package
pnpm run rollup

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

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

👨‍💻 Author

Prabhu Murthy

• Twitter: @prabhumurthy2
• Email: [email protected]
• Website: prabhumurthy.com
• GitHub: @prabhuignoto