Breadcrumbs

Breadcrumbs are a navigation pattern that allows user to see where they are in the hierarchy of a site.

Code


                                                        
                                                        
                                                            <template>
                                                          <w-stack gap="medium" direction="column">
                                                            <w-text type="sectionHeading">
                                                              Breadcrumbs with a heading
                                                            </w-text>
                                                            <w-stack direction="column" gap="small">
                                                              <w-breadcrumbs id="breadcrumbs-with-heading"></w-breadcrumbs>
                                                              <w-text aria-current="page" type="displayHeading">
                                                                John Doe
                                                              </w-text>
                                                            </w-stack>
                                                          </w-stack>
                                                        </template>
                                                        <script type="module">
                                                        const items = [
                                                          { to: '/', label: 'Settings' },
                                                          { to: '/', label: 'Users and permissions' }
                                                        ];
                                                        
                                                        const breadcrumbsWithHeading = document.querySelector('#breadcrumbs-with-heading');
                                                        breadcrumbsWithHeading.items = items;
                                                        </script>
                                                        
                                                        
                                                            

 

Props

Name

Description

Type

Default

Values

items Required

Array of objects that represents the list of Breadcrumbs items for the Breadcrumbs component.

array

 

[ { label: String, to: String, isActive: Boolean } ]