Breadcrumbs

Component

Props

Usage

showHome

Determines whether to display the home icon at the beginning of the breadcrumbs.

 <template>
    <Breadcrumbs showHome />
</template>
 

• Type: boolean
• Default: true

homeIcon

Specifies the icon to be used for the home link in the breadcrumbs.

 <template>
    <Breadcrumbs homeIcon="mdi:home-outline" /> 
</template>
 

• Type: string
• Default: 'mdi:home-outline'

separatorIcon

Specifies the icon to be used as a separator between breadcrumb items.

 <template>
    <Breadcrumbs separatorIcon="mdi:chevron-right" />
</template>
 

• Type: string
• Default: 'mdi:chevron-right'

includeCurrent

Determines whether to include the current page in the breadcrumb trail.

 <template>
    <Breadcrumbs :includeCurrent="false" />
</template>
 

• Type: boolean
• Default: false

customRoute

Allows you to specify a custom route for generating breadcrumbs instead of using the current route.

 <template>
    <Breadcrumbs customRoute="/custom/path" />
</template>
 

• Type: string | null | undefined
• Default: null

homeIconClass

Applies custom CSS classes to the home icon.

 <template>
    <Breadcrumbs homeIconClass="custom-home-icon" />
</template>
 

• Type: string
• Default: ''

separatorClass

Applies custom CSS classes to the separator icon.

 <template>
    <Breadcrumbs separatorClass="custom-separator" />
</template>
 

• Type: string
• Default: ''

crumbClass

Applies custom CSS classes to each breadcrumb item.

 <template>
    <Breadcrumbs crumbClass="custom-crumb" />
</template>
 

• Type: string
• Default: ''

currentCrumbClass

Applies custom CSS classes to the current breadcrumb item.

 <template>
    <Breadcrumbs currentCrumbClass="custom-current-crumb" />
</template>
 

• Type: string
• Default: ''