Feedback would be much appreciated, questions, suggestions, issues are more than welcome.

When implemented, this navigation component lets you press a hotkey (default: spacebar) which immediately brings up a pie-like navigation component. It tries to center around the mouse center, but adjusts given certain rules so that all options remain visible. While the hotkey is depressed, user can simply move the mouse over the desired zone and release the hotkey. The associated method (typically navigation, but could be anything) will then fire, and the component will hide.

In your own Vue scripts:

<template>
  <div>
    <ApplePie trigger="s" :zones="zones" />
  </div>
</template>

<script>
import ApplePie from 'ApplePieNav.vue'
export default {
  components: [ApplePie],
  data() {
    return {
      zones: [
        {
          label: 'Pizza',
          exec: () => {
            console.log('This is a direct method')
          }
        },
        {
          label: 'Beer',
          exec: this.sayBeer
        }
      ]
    }
  },
  methods: {
    sayBeer() {
      console.log('To drink or not to drink...')
    }
  }
}
</script>

Vue component parameters:

• Prevents the pie from starting too close to the window's margin if the mouse is within said margin. This is good because it prevents options from being hidden.
• Automatically limits the number of options passed in to between 3 and 9 because, really... What do you need a pie nav for fewer or more at one time?
• Allows as many different pie navs to be loaded as you wish. Just associate them with different trigger keys and you can have multiple hyper menus available in your system.

To capture and react to user keypresses

To make things look nice in a way that makes sense.

I started building 3D scenes with Blender and had my mind blown by their implementation of rapid navigation with their pie menus. I honestly believe it's one of the fastest ways to navigate to different pages in a user interface because it allows you to simply gesture with your trackpad or mouse which is far simpler than hunting down a small-target menu item to get to your destination.