Breadcrumb

A list of links showing the location of the current page in the navigational hierarchy.

Code


                                                        
                                                        
                                                            <PyxisBreadcrumb 
                                                            items="[{label: 'Home', route: '/'}, {label: 'Contact', route: '/contact'}]"
                                                            data-testid="breadcrumb-testid"
                                                        />

Example of a Breadcrumb component

Props

The Breadcrumb component supports the following props:

Name	Type	Default	Required
items	{ label: string subLabel?: string route: string icon?: string iconColor?: string background?: boolean subItems?: InComponentItem[] cf. InComponentSelect Types }[]	undefined	true
dataTestid	string	undefined	true
divider	'/'\|'>'	'>'	false
breadcrumbClass	string	undefined	false
weight	'regular'\|'bold'	'regular'	false

In Component Select

Code


                                                        
                                                        
                                                            <PyxisInComponentSelect
                                                            :dataTestid="in-component-select-datatest-id"
                                                            :inComponentItems="inComponentItems"
                                                        >
                                                            <template #htmlElement>
                                                                <PyxisIcon icon-class="far fa-planet-ringed" class="mr-10" withBackground color="system"/>
                                                                <div class="flex flex-col text-left">
                                                                    <PyxisText class="text-caption" size="m-bold">Item</PyxisText>
                                                                    <PyxisText size="s">Sub item</PyxisText>
                                                                </div>
                                                            </template>
                                                        </PyxisInComponentSelect>

Example of a Breadcrumb component


                                                        
                                                        
                                                            inComponentItems: [
                                                                    {
                                                                        label: "Home",
                                                                        icon: "fas fa-home",
                                                                        route: "/",
                                                                    },
                                                                    {
                                                                        label: "Library",
                                                                        icon: "fas fa-book",
                                                                        route: "/",
                                                                    },
                                                                    {
                                                                        label: "Data",
                                                                        icon: "fas fa-database",
                                                                        route: "/",
                                                                    },
                                                                    {
                                                                        label: "Files",
                                                                        icon: "fas fa-file",
                                                                        route: "/",
                                                                    },
                                                                ],

Example of a menuItem object to be provided to the component

Props

The InComponentSelect component supports the following props:

Name	Type	Default	Required
inComponentItems	InComponentItem [] cf. InComponentSelect Types	undefined	true
dataTestid	string	undefined	true
class	CxOptions \| string	undefined	false

Types


                                                        
                                                        
                                                            export type InComponentItem = {
                                                            label: string | number
                                                            icon?: string
                                                            iconColor?: string
                                                            background?: boolean
                                                            size?: string
                                                            route: string
                                                        }

Slots

The InComponentSelect component offers the following slots for managing its template content:

v-slot:htmlElement : This slot is used to define the element that triggers the display of the InComponentSelect when clicked.