lcsmuller/vuejs-circular-menu

A minimal circle menu component for Vue3.

Vue.js Circular Menu

Circle based menu component for Vue.js with custom angle range and any number of menu items.

Demo: https://lcsmuller.github.io/vuejs-circular-menu

Table of Contents

• Setup
• Example
• Props
  • CircleMenu
  • CircleMenuItem

Setup

Install the npm package.

npm install vuejs-circular-menu
# or
pnpm add vuejs-circular-menu
# or
yarn add vuejs-circular-menu

Install external dependency styled-components if you don't already have it.

npm install styled-components
# or
yarn add styled-components

Example

<template>
  <CircleMenu
    :start-angle="-90"
    :rotation-angle="360"
    :item-size="2"
    :radius="5"
    :rotation-angle-inclusive="false"
    @menu-toggle="handleMenuToggle"
  >
    <CircleMenuItem
      @click="handleMailClick"
      tooltip="Email"
      :tooltip-placement="TooltipPlacement.Right"
    >
      📧
    </CircleMenuItem>
    <CircleMenuItem tooltip="Help">
      ❓
    </CircleMenuItem>
    <CircleMenuItem tooltip="Map">
      🗺️
    </CircleMenuItem>
    <CircleMenuItem tooltip="Settings">
      ⚙️
    </CircleMenuItem>
  </CircleMenu>
</template>

<script setup lang="ts">
import { 
  CircleMenu, 
  CircleMenuItem, 
  TooltipPlacement 
} from "vuejs-circular-menu";

const handleMailClick = () => {
  alert("Clicked the item");
};

const handleMenuToggle = (isOpen: boolean) => {
  console.log('Menu is now:', isOpen ? 'open' : 'closed');
};
</script>

Props

All angles are in degrees.

• CircleMenu
• CircleMenuItem

CircleMenu

• startAngle: number
• rotationAngle: number
• rotationAngleInclusive?: boolean
• radius?: number
• itemSize?: number
• className?: string
• menuToggleElement?: Component
• menuToggleClassName?: string
• open?: boolean

Events:

• @menu-toggle: (menuActive: boolean) => void - Emitted when menu open state changes

startAngle: number

The angle at which the circle menu starts. That is, the angle at which the first item exists.

Example: -90

rotationAngle: number

The angle by which the menu is to be rotated. For example, 360 for a complete circle.

Example: 270

rotationAngleInclusive?: boolean

Whether to include the ending angle in rotation. Because an item at 360 degrees is the same as an item at 0 degree if inclusive. Leave this prop for angles other than 360 degrees unless otherwise desired.

Example: false

radius?: number

Radius of the circle (in em).

Example: 5

itemSize?: number

Size of the menu toggle and menu items (in em).

Example: 2

className?: string

Class name to apply custom styles to circle menu wrapper.

Example: testClass

menuToggleElement?: Component

A Vue component to use as the menu toggle element instead of the default toggle.

NOTE: The component must handle @click events. The event doesn't need to be specified but it should be supported.

Example: <button>Toggle Menu</button>

menuToggleClassName?: string

Class name to apply custom styles to circle menu toggle.

Example: testClass

onMenuToggle?: (menuActive: boolean) => void

Callback called on toggling the menu.

Example:

(menuActive) => console.log(menuActive);

open?: boolean

Whether the menu is open or not. This can be used to control the menu's toggle state from the parent component.

Example: false

children: ReactNode

Children of the menu.

CircleMenuItem

• size?: number
• link?: string
• tooltipPlacement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top'
• target?: string
• className?: string
• style?: CSSProperties
• onClick?: (event: MouseEvent) => void
• radius?: number
• menuActive?: boolean
• children: ReactNode

size?: number

Size of the menu item. Set by itemSize of CircleMenu component.

Example: 2

link?: string

Link to point to a URL.

Example: https://google.com

tooltipPlacement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top'

Placement position of the menu item tooltip.

Example: top

target?: string

The target attribute of anchor tag (<a target="_blank"></a>) if link prop is set.

Example: _blank

className?: string

Extra class name for applying custom styles.

Example: testClass

style?: CSSProperties

Extra inline styles for the component.

Example: { background: 'red' }

onClick?: (event: MouseEvent) => void

Callback when the component is clicked.

Example:

(event) => console.log("Clicked");

radius?: number

Radius of the menu item from the menu toggle. Set by CircleMenu component.

Example: 5

menuActive?: boolean

Whether the menu and thus the menu item is active or not. Set by CircleMenu component.

Example: true

rotationAngle?: number

Rotation angle in degrees of the menu item from the startAngle of CircleMenu. Set by CircleMenu component.

Example: 90

children: ReactNode

Children of the menu.