BaseMenu #

BaseMenu serves as a building block for the library's menu components. Library consumers may use it if they have requirements not fulfilled by the branded option, AisMenu. The BaseMenu component wraps these other, related components: BaseMenuItem, BaseMenuGroup and BaseMenuDivider

Props #

The following props are exposed to allow you to define and style your menu to fit your needs:

Menu Button #

• label the text that should be displayed on the menu button
• buttonClass is for adding classes to the menu button container
• icon is for designating an icon to appear on the left side of the menu button
• iconClass is for adding classes to the icon on the left side of the menu button
• arrowIcon is for designating which arrow icon to appear on the right side of the menu button
• arrowClass is for adding classes to the arrow icon on the right side of the menu button

Menu Items #

This is the menu dropdown container, which contains one or more Menu Items

• itemsClass is for adding classes to the menu items container
• items the Array of menu items that should be displayed in the dropdown menu container. Menu items can also be passed in via the default slot using the BaseMenuItem component

Menu Item #

• itemClass is for adding classes to each of the menu items
• active-class for styling the menu items, including nested menu buttons, when hovering.
• itemIconClass is for adding classes to the icon on the left side of each menu item

Alignment & Positioning #

• right when true this right-aligns the dropdown menu container with the right side of the menu button.
• dropup when true the dropdown menu container appears above the menu button
• dropright when true the dropdown menu container appears to the right of the menu button
• dropleft when true the dropdown menu container appears to the left of the menu button

Rendering #

The following props allow for flexibility around what element each piece of the menu component is rendered as:

• as this indicates what element the menu wrapper should be rendered as. The default is template
• buttonAs this indicates what element the menu button should be rendered as. The default is div
• itemsAs this indicates what element the dropdown menu container should be rendered as. The default is div
• itemAs this indicates what element each menu item should be rendered as. The default is template

Example Usage #

<template>
  <div class="grid grid-cols-2 gap-8 mb-80">
    <div>
      <BaseMenu label="Using Default Slot" icon="group">
        <BaseMenuItem label="Menu Item 1" href="/item1" icon="user"></BaseMenuItem>
        <BaseMenuItem label="Menu Item 2"></BaseMenuItem>
        <BaseMenuItem label="Menu Item 3"></BaseMenuItem>
        <BaseMenu label="Menu Item 4" dropright>
          <BaseMenuItem label="Menu Item 4.1"></BaseMenuItem>
          <BaseMenuItem label="Menu Item 4.2"></BaseMenuItem>
          <BaseMenuItem label="Menu Item 4.3"></BaseMenuItem>
          <BaseMenu label="Menu Item 4" icon="group" dropright>
            <BaseMenuItem label="Menu Item 4.1"></BaseMenuItem>
            <BaseMenuItem label="Menu Item 4.2"></BaseMenuItem>
            <BaseMenuItem label="Menu Item 4.3"></BaseMenuItem>
          </BaseMenu>
        </BaseMenu>
      </BaseMenu>
    </div>

    <div>
      <BaseMenu label="Using 'items' Prop" icon="group" :items="allItems"></BaseMenu>
    </div>
  </div>

</template>

<script setup>
  import BaseMenu from "@/components/menu/BaseMenu.vue";
  import BaseMenuItem from "@/components/menu/BaseMenuItem.vue";
  import { allItems } from "@/components/menu/examples/example-items.js"

  const handleClick = (e) => { console.log(`Item Clicked ${e}`) }
</script>

<script>
export default {
  name: "BaseMenuExample",
}
</script>