AisMenu

The AisMenu is our branded menu component. It was built using our BaseMenu component. The contents of the menu are built using related subcomponents.

Related Subcomponents

AisMenuItem

Each item in the menu.

Props

• label the text for the menu item
• href the url for the menu item when clicked
• to the destination for the menu item when using vue-router's RouterLink or Nuxt's NuxtLink
• icon the icon to be displayed on the left side of the menu item. The icon prop accepts either an object imported from the FontAwesome icon packs, or a string specifying one of the preloaded, core icons

** Note: If no href or to value is provided, the menu item will be plain text and will emit a click event for you to hook into

With Icons Using Default Slot

With Icons Using Items Prop

<template>
  <div class="flex gap-8">
    <div>
      <AisMenu label="With Icons Using Default Slot">
        <AisMenuItem label="Search" icon="search" href="/search"></AisMenuItem>
        <AisMenuItem label="Save" icon="save" href="/save"></AisMenuItem>
        <AisMenuItem label="Delete" icon="delete" to="/delete"></AisMenuItem>
        <AisMenuItem label="Using a non-core icon" :icon="faApple" to="/apple"></AisMenuItem>
        <AisMenuItem label="Cancel" icon="cancel" @click="handleCancel"></AisMenuItem>
      </AisMenu>
    </div>

    <div>
      <AisMenu label="With Icons Using Items Prop"
               :items="iconItems"
      ></AisMenu>
    </div>
  </div>

</template>

<script setup>
  import { ref } from 'vue'
  import { AisMenu } from '@ais-public/ais-components';
  import { AisMenuItem } from '@ais-public/ais-components';
  import { faApple } from "@fortawesome/free-brands-svg-icons";
  import { library } from '@fortawesome/fontawesome-svg-core'
  library.add(faApple)

  const iconItems = ref([
    { key: 'search', label: 'Search', icon: 'search', href: '/search' },
    { key: 'save', label: 'Save', icon: 'save', href: '/save' },
    { key: 'delete', label: 'Delete', icon: 'save', to: '/delete' },
    { key: 'apple', label: 'Using a non-core icon', icon: faApple, to: '/apple' },
    { key: 'close', label: 'Close', icon: "cancel" },
  ])

  const handleCancel = (e) => {
    console.log(`handleCancel: ${e}`)
  }
</script>

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

AisMenuGroup

Allows you to group some menu items together, with a group header. The default slot can be used to list the AisMenuItems in the group.

Props

• label the text of the group header
• items the Array of menu items in the group. This is an alternative to using the default slot
• headerAs allows you to render the group header as a different element. The default element is header
• headerClass allows you to add classes to your group header element

Menu Using Group

<template>
  <div class="grid grid-cols-3 gap-4">
    <div>
      <AisMenu label="Menu Using Group">
        <AisMenuItem label="Menu Item 1"></AisMenuItem>
        <AisMenuItem label="Menu Item 2"></AisMenuItem>

        <AisMenuGroup label="Group 1" header-class="text-sm font-bold">
          <AisMenuItem label="Group 1 Item 1"></AisMenuItem>
          <AisMenuItem label="Group 1 Item 2"></AisMenuItem>
          <AisMenuItem label="Group 1 Item 3"></AisMenuItem>
        </AisMenuGroup>

        <AisMenuGroup label="Group 2" header-class="text-sm font-bold">
          <AisMenuItem label="Group 2 Item 1"></AisMenuItem>
          <AisMenuItem label="Group 2 Item 2"></AisMenuItem>
          <AisMenuItem label="Group 2 Item 3"></AisMenuItem>
        </AisMenuGroup>

        <AisMenuItem label="Menu Item 3"></AisMenuItem>
      </AisMenu>
    </div>
  </div>

</template>

<script setup>
  import { ref } from 'vue'
  import { AisMenu } from '@ais-public/ais-components';
  import { AisMenuItem } from '@ais-public/ais-components';
  import { AisMenuGroup } from '@ais-public/ais-components';

  const items = ref([
    { key: 'item1', label: 'Menu Item 1' },
    { key: 'item2', label: 'Menu Item 2' },
    { key: 'group1',
      type: 'group',
      label: 'Group 1',
      headerClass: 'text-gray-400 font-bold',
      items: [
        { key: 'group1Item1', label: 'Group 1 Item 1' },
        { key: 'group1Item2', label: 'Group 1 Item 2' },
        { key: 'group1Item3', label: 'Group 1 Item 3' },
      ]
    },
    { key: 'group2',
      type: 'group',
      label: 'Group 2',
      headerClass: 'text-gray-400 font-bold',
      items: [
        { key: 'group2Item1', label: 'Group 2 Item 1' },
        { key: 'group2Item2', label: 'Group 2 Item 2' },
        { key: 'group2Item3', label: 'Group 2 Item 3' },
      ]
    },
    { key: 'item3', label: 'Menu Item 3' },
  ])


</script>

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

AisMenuDivider

Use the AisDivider component for adding a divider to a menu. When using the items prop for generating your menu, just add an item with type: 'divider'. The divider color is set to bg-ui-gray-100

With Divider

With Divider Using Items Prop

<template>
  <div class="flex gap-8">
    <div>
      <AisMenu label="With Divider">
        <AisMenuItem label="Menu Item 1"></AisMenuItem>
        <AisMenuItem label="Menu Item 2"></AisMenuItem>
        <AisMenuDivider/>
        <AisMenuItem label="Menu Item 3"></AisMenuItem>
      </AisMenu>
    </div>
    <div>
      <AisMenu label="With Divider Using Items Prop" :items="items"></AisMenu>
    </div>
  </div>

</template>

<script setup>
  import { ref } from "vue";
  import { AisMenu } from '@ais-public/ais-components';
  import { AisMenuItem } from '@ais-public/ais-components';
  import { AisMenuDivider } from '@ais-public/ais-components';

  const items = ref([
    { key: 'item1', label: 'Menu Item 1' },
    { key: 'item2', label: 'Menu Item 2' },
    { key: 'divider1', type: 'divider' },
    { key: 'item3', label: 'Menu Item 3' },
  ])
</script>

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

Example Usages

The menu can be built using the default slot or by using the items prop.

Using Default Slot

To build the menu using the default slot, just pass any combination of AisMenuItem, AisMenuGroup, or AisMenuDivider components into the default slot of the AisMenu component

Using Default Slot

<template>
  <div class="flex gap-8">
    <div>
      <AisMenu label="Using Default Slot">
        <AisMenuItem label="Menu Item 1" href="/menu/item/1"></AisMenuItem>
        <AisMenuItem label="Menu Item 2" to="/menu/item/1"></AisMenuItem>
        <AisMenuItem label="Menu Item 3" @click="handleClick"></AisMenuItem>
      </AisMenu>
    </div>
  </div>

</template>

<script setup>
  import { AisMenu } from '@ais-public/ais-components';
  import { AisMenuItem } from '@ais-public/ais-components';

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

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

Using 'Items' Prop

The items prop allows you to define your menu structure in a JavaScript Array instead of using the default slot. In the background the AisMenu component will iterate through your array of items and define the menu contents using the menu subcomponents.

Using Items Prop

<template>
  <div class="flex gap-8">
    <div>
      <AisMenu label="Using Items Prop"
               :items="items"
      ></AisMenu>
    </div>
  </div>

</template>

<script setup>
  import { ref } from "vue"
  import { AisMenu } from '@ais-public/ais-components';

  const items = ref([
    { key: 'item1', label: 'Menu Item 1', href: '/menu/item/1' },
    { key: 'item2', label: 'Menu Item 2', to: '/menu/item/1' },
    { key: 'item3', label: 'Menu Item 3' },
  ])
</script>

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

Button Props

• label prop sets the text of the menu button
• buttonClass prop is for adding classes to the menu button
• icon prop is for specifying the icon to be displayed on the left side of the menu button. It accepts either an object imported from the FontAwesome icon packs, or a string specifying one of the preloaded, core icons

Using a Core Icon

Using a FontAwesome object

<template>
  <div class="flex gap-8">
    <div>
      <AisMenu :items="items"
               label="Using a Core Icon"
               button-class="px-3 py-2 gap-2 border border-blue-500 rounded"
               icon="group"
      ></AisMenu>
    </div>
    <div>
      <AisMenu :items="items"
               label="Using a FontAwesome object"
               button-class="px-3 py-2 gap-2 border border-blue-500 rounded"
               :icon="faApple"
      ></AisMenu>
    </div>
  </div>
</template>

<script setup>
  import { AisMenu } from '@ais-public/ais-components';
  import { items } from "@/components/menu/examples/example-items.js"
  import { faApple } from "@fortawesome/free-brands-svg-icons";
  import { library } from '@fortawesome/fontawesome-svg-core'
  library.add(faApple)
</script>

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

Alignment Prop

The menu you can align on the left or right side of the menu button. The default is for the menu to align with the left side. Use the right prop to have the menu align with the right side of the menu button. This prop is a boolean prop, so it does not require a value. The buttons are styled here to make it easier to see the effect.

Align Left (default)

Align to the Right

<template>
  <div class="flex gap-12">
    <div>
      <AisMenu label="Align Left (default)" button-class="p-2 gap-2 border border-blue-400" :items="items"></AisMenu>
    </div>
    <div>
      <AisMenu label="Align to the Right" button-class="p-2 gap-2 border border-blue-400" :items="items"
               right
      ></AisMenu>
    </div>
  </div>
</template>

<script setup>
  import { AisMenu } from '@ais-public/ais-components';
  import { items } from "@/components/menu/examples/example-items.js"
</script>

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

Positioning Props

The menu can drop in any direction. The default drop position for the menu is down. Other options are exposed via the following props:

• dropup to drop the menu above the menu button
• dropright to drop the menu to the right of the menu button
• dropleft to drop the menu to the left of the menu button These props are all Boolean props, so they do not require a value

Drop-Right

Drop-Up

Drop-Up & Right

Drop-Left

<template>
  <div class="flex justify-between gap-8">
    <div>
      <AisMenu label="Drop-Right"
               :items="items"
               arrow-icon="right"
               dropright
      ></AisMenu>
    </div>

    <div>
      <AisMenu label="Drop-Up"
               :items="items"
               dropup
      ></AisMenu>
    </div>

    <div>
      <AisMenu label="Drop-Up & Right"
               :items="items"
               dropup right
      ></AisMenu>
    </div>

    <div>
      <AisMenu label="Drop-Left"
               :items="items"
               icon="left"
               dropleft
      ></AisMenu>
    </div>
  </div>

</template>

<script setup>
  import { AisMenu } from '@ais-public/ais-components';
  import { items } from "@/components/menu/examples/example-items.js"
</script>

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

Nested Menus

Multi-Level

<template>
  <div class="flex gap-8">
    <div>
      <AisMenu label="Multi-Level">
        <AisMenuItem label="Menu Item 1"></AisMenuItem>
        <AisMenuItem label="Menu Item 2"></AisMenuItem>
        <AisMenuItem>
          <AisMenu label="Nested&nbsp;Menu&nbsp;3"
                   icon="group"
          >
            <AisMenuItem label="Menu Item 3.1" icon="person"></AisMenuItem>
            <AisMenuItem label="Menu Item 3.2" icon="person"></AisMenuItem>
            <AisMenuItem label="Menu Item 3.3" icon="person"></AisMenuItem>
            <AisMenuItem>
              <AisMenu label="Nested&nbsp;Menu&nbsp;3.4"
                       icon="group"
              >
                <AisMenuItem label="Menu Item 3.4.1" icon="person"></AisMenuItem>
                <AisMenuItem label="Menu Item 3.4.2" icon="person"></AisMenuItem>
                <AisMenuItem label="Menu Item 3.4.3" icon="person"></AisMenuItem>
              </AisMenu>
            </AisMenuItem>
          </AisMenu>
        </AisMenuItem>
      </AisMenu>
    </div>
  </div>

</template>

<script setup>
  import { AisMenu } from '@ais-public/ais-components';
  import { AisMenuItem } from '@ais-public/ais-components';

</script>

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