Sub-menu

Allows user to navigate through different blocks of content inside the same page

Code


                                                        
                                                        
                                                            <PyxisSubMenu
                                                            @update:modelValue="updateSelectedMenu"
                                                            v-model="modelValue"
                                                            :menus-list="[
                                                               {
                                                                  value: "sub1",
                                                                  label: "Sub1",
                                                                  url: '/',
                                                                  dataTestid: "submenu1",
                                                               },
                                                               {
                                                                  value: "sub2",
                                                                  label: "Sub2",
                                                                  url: '/',
                                                                  dataTestid: "submenu2",
                                                               }
                                                            ]"
                                                            data-testid="sub-menu"
                                                        
                                                        />

Example of a purple SubMenu component

Props

The SubMenu component supports the following Props:

Name	Type	Default	Required
menuList	{ value: string url: string label: string dataTestid: string iconClass?: string iconColor?: string }[]	undefined	true
dataTestid	string	undefined	true
v-model	string	undefined	false
isScrollable	boolean	false	false

Events

The interactions on the Sub-menu component are handled by the following Events

@update:modelValue : This event is emitted when the component's state or data is updated.