UI Development with Chakra UI Vue — Menu

Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.

This article will look at how to get started with UI development with Chakra UI Vue.

Menu

The c-menu component lets us add a menu into our Vue app.

To add it, we write:

<template>
  <c-box>
    <c-menu>
      <c-menu-button right-icon="chevron-down"> Actions </c-menu-button>
      <c-menu-list>
        <c-menu-item>Download</c-menu-item>
        <c-menu-item>Create a Copy</c-menu-item>
        <c-menu-item>Mark as Draft</c-menu-item>
        <c-menu-item>Delete</c-menu-item>
        <c-menu-item as="a" href="#"> Attend a Workshop </c-menu-item>
      </c-menu-list>
    </c-menu>
  </c-box>
</template>

<script>
import {
  CBox,
  CMenu,
  CMenuButton,
  CMenuList,
  CMenuItem,
  CMenuGroup,
  CMenuDivider,
  CMenuOptionGroup,
  CMenuItemOption,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CMenu,
    CMenuButton,
    CMenuList,
    CMenuItem,
    CMenuGroup,
    CMenuDivider,
    CMenuOptionGroup,
    CMenuItemOption,
  },
};
</script>

We register the CMenu, CMenuButton, CMenuList, CMenuItemcomponents to add the menu.

CMenu is the main menu container.

CMenuButton is the button to toggle the menu on and off.

CMenuList is the menu list container.

right-icon sets the icon to display to the right of the menu text.

We can group menu items with the c-menu-group component:

<template>
  <c-box>
    <c-menu>
      <c-menu-button right-icon="chevron-down" variant-color="pink">
        Profile
      </c-menu-button>
      <c-menu-list>
        <c-menu-group title="Profile">
          <c-menu-item>My Account</c-menu-item>
          <c-menu-item>Payments </c-menu-item>
        </c-menu-group>
        <c-menu-divider />
        <c-menu-group title="Help">
          <c-menu-item>Docs</c-menu-item>
          <c-menu-item>FAQ</c-menu-item>
        </c-menu-group>
      </c-menu-list>
    </c-menu>
  </c-box>
</template>

<script>
import {
  CBox,
  CMenu,
  CMenuButton,
  CMenuList,
  CMenuItem,
  CMenuGroup,
  CMenuDivider,
  CMenuOptionGroup,
  CMenuItemOption,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CMenu,
    CMenuButton,
    CMenuList,
    CMenuItem,
    CMenuGroup,
    CMenuDivider,
    CMenuOptionGroup,
    CMenuItemOption,
  },
};
</script>

variant-color sets the background color of the menu button.

c-menu-divider is the menu group divider.

title is displayed as the heading of the group.

Conclusion

We can add a menu easily with Chakra UI Vue.