Gathering detailed insights and metrics for @chakra-ui/c-menu
Gathering detailed insights and metrics for @chakra-ui/c-menu
Gathering detailed insights and metrics for @chakra-ui/c-menu
Gathering detailed insights and metrics for @chakra-ui/c-menu
⚡️ The next most epic version of Chakra UI Vue based on Vue 3 🚀(WIP)
npm install @chakra-ui/c-menu
Typescript
Module System
Node Version
NPM Version
@chakra-ui/vue-next@2.1.0-beta.11
Updated on Mar 28, 2023
@chakra-ui/vue-next@2.1.0-beta.10
Updated on Mar 28, 2023
@chakra-ui/vue-next@2.1.0-beta.8
Updated on Mar 21, 2023
@chakra-ui/vue-next@2.1.0-beta.7
Updated on Mar 14, 2023
@chakra-ui/vue-next@2.1.0-beta.6
Updated on Mar 12, 2023
@chakra-ui/vue-next@2.1.0-beta.5
Updated on Mar 12, 2023
TypeScript (81.11%)
Vue (17.15%)
JavaScript (0.74%)
EJS (0.74%)
HTML (0.27%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
259 Stars
1,381 Commits
32 Forks
10 Watchers
80 Branches
16 Contributors
Updated on Jun 11, 2025
Latest Version
0.0.0-dev-20230216010105
Package Id
@chakra-ui/c-menu@0.0.0-dev-20230216010105
Unpacked Size
36.88 kB
Size
6.28 kB
File Count
9
NPM Version
8.19.3
Node Version
16.19.0
Published on
Feb 16, 2023
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
8
1
1
An accessible dropdown menu for the common dropdown menu button design pattern. Menu uses roving tabIndex for focus management.
1npm i @chakra-ui/c-menu
This package exports the following components :
CMenu
: The wrapper component provides context, state, and focus management.CMenuList
: The wrapper for the menu items. Must be a direct child of CMenu
.CMenuTrigger
: The trigger for the menu list. Must be a direct child of CMenu
.CMenuItem
: The trigger that handles menu selection. Must be a direct child of a CMenuList
.CMenuGroup
: A wrapper to group related menu items.CMenuDivider
: A wrapper to group related menu items.CSubMenu
: The wrapper component for sub menus. This is similar to CMenu
. Must be a direct child of CMenuList
CSubMenuList
: Wrapper for sub menu items. Must be a direct child of CSubMenu
.CSubMenuItem
: The trigger that handles sub menu selection. Similar to CMenuItem
. Must be a direct child of CSubMenuList
.CSubMenuTrigger
: This renders as a sub menu item but behaves like a trigger to open a sub menu.1<script setup> 2import { CMenu, CMenuList, CMenuItem, CMenuTrigger } from "@chakra-ui/c-menu" 3</script> 4<template> 5 <c-menu> 6 <c-menu-trigger>Open menu</c-menu-trigger> 7 <c-menu-list> 8 <c-menu-item>Add</c-menu-item> 9 <c-menu-item>Remove</c-menu-item> 10 <c-menu-item>Update</c-menu-item> 11 <c-menu-item>Patch</c-menu-item> 12 </c-menu-list> 13 </c-menu> 14</template>
To access internal state of a CMenu
, use a ref
on the menu to access it throught template ref.
You'll get access to isOpen
, open
and close
. This will allow you to have a controlled usage of the component.
1<script setup> 2import { ref } from "vue" 3import { CMenu, CMenuList, CMenuItem, CMenuTrigger } from "@chakra-ui/c-menu" 4 5const menu = ref(null) 6</script> 7<template> 8 <c-button color-scheme="purple" @click="menu.open()">Trigger menu</c-button> 9 <c-menu ref="menu"> 10 <c-menu-trigger>Open menu</c-menu-trigger> 11 <c-menu-list> 12 <c-menu-item>Add</c-menu-item> 13 <c-menu-item>Remove</c-menu-item> 14 <c-menu-item>Update</c-menu-item> 15 <c-menu-item>Patch</c-menu-item> 16 </c-menu-list> 17 </c-menu> 18</template>
The default CMenuTrigger
can be styled using the usual styled-system props, but it starts off plainly styled.
To group related CMenuItems
, use the CMenuGroup
component and pass it a title for the group name.
1<script setup> 2import { 3 CMenu, 4 CMenuList, 5 CMenuItem, 6 CMenuTrigger, 7 CMenuGroup, 8 CMenuDivider, 9} from "@chakra-ui/c-menu" 10</script> 11<template> 12 <c-menu> 13 <c-menu-trigger>Open menu</c-menu-trigger> 14 <c-menu-list> 15 <c-menu-group group-title="Actions"> 16 <c-menu-item>Add</c-menu-item> 17 <c-menu-item>Remove</c-menu-item> 18 <c-menu-item>Update</c-menu-item> 19 <c-menu-item>Patch</c-menu-item> 20 </c-menu-group> 21 <c-menu-divider></c-menu-divider> 22 <c-menu-group group-title="Social"> 23 <c-menu-item>Discord</c-menu-item> 24 <c-menu-item>Twitter</c-menu-item> 25 <c-menu-item>Github</c-menu-item> 26 </c-menu-group> 27 </c-menu-list> 28 </c-menu> 29</template>
You can have as much as sub menus as you want. To achieve this, just use the CSubMenu
component along with the label
prop and respect the same architecture as the CMenu
.
1<template>
2 <c-menu aria-label="crud">
3 <c-menu-trigger>Click me</c-menu-trigger>
4 <c-menu-list>
5 <c-menu-item value="Add">
6 Add
7 </c-menu-item>
8 <c-menu-item>Remove</c-menu-item>
9 <c-menu-divider></c-menu-divider>
10 <c-sub-menu label="update">
11 <c-sub-menu-trigger>Update →</c-sub-menu-trigger>
12 <c-sub-menu-list>
13 <c-sub-menu-item>Value 1</c-sub-menu-item>
14 <c-sub-menu-item>Value 2</c-sub-menu-item>
15 <c-sub-menu-item>Value 3</c-sub-menu-item>
16 <c-sub-menu label="Value 4">
17 <c-sub-menu-trigger>Value 4 →</c-sub-menu-trigger>
18 <c-sub-menu-list>
19 <c-sub-menu-item>SubValue 1</c-sub-menu-item>
20 <c-sub-menu-item>SubValue 2</c-sub-menu-item>
21 <c-sub-menu-item>SubValue 3</c-sub-menu-item>
22 <c-sub-menu label="SubValue 4">
23 <c-sub-menu-trigger>SubValue 4 →</c-sub-menu-trigger>
24 <c-sub-menu-list>
25 <c-sub-menu-item>SubSubValue 1</c-sub-menu-item>
26 <c-sub-menu-item>SubSubValue 2</c-sub-menu-item>
27 <c-sub-menu-item>SubSubValue 3</c-sub-menu-item>
28 </c-sub-menu-list>
29 </c-sub-menu>
30 </c-sub-menu-list>
31 </c-sub-menu>
32 </c-sub-menu-list>
33 </c-sub-menu>
34 </c-menu-list>
35 </c-menu>
36</template>
37<script setup>
38import {
39 CMenu,
40 CMenuList,
41 CMenuTrigger,
42 CMenuItem,
43 CSubMenu,
44 CMenuDivider,
45 CSubMenuTrigger,
46 CSubMenuList,
47 CSubMenuItem,
48 CMenuGroup,
49} from "@chakra-ui/c-menu"
50</script>
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 7/15 approved changesets -- score normalized to 4
Reason
project is archived
Details
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
56 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More