PubBreadcrumb

This is a component for displaying a breadcrumb navigation. It provides a list of links to navigate between different pages or sections of a website.

Default breadcrumb

1. Home
2. Profile
3. Cart

<template>
  <pub-breadcrumb>
    <pub-breadcrumb-item
      home
      href="#"
    >
      Home
    </pub-breadcrumb-item>
    <pub-breadcrumb-item href="#">
      Profile
    </pub-breadcrumb-item>
    <pub-breadcrumb-item> Cart </pub-breadcrumb-item>
  </pub-breadcrumb>
</template>

<script lang="ts" setup>
import { PubBreadcrumb, PubBreadcrumbItem } from 'vuelicity'
</script>

Solid breadcrumb

Prop - solid Usage

The solid prop can be used to change the background color of the breadcrumb.

1. Home
2. Profile
3. Cart

<template>
  <pub-breadcrumb solid>
    <pub-breadcrumb-item
      home
      href="#"
    >
      Home
    </pub-breadcrumb-item>
    <pub-breadcrumb-item href="#">
      Profile
    </pub-breadcrumb-item>
    <pub-breadcrumb-item> Cart </pub-breadcrumb-item>
  </pub-breadcrumb>
</template>

<script lang="ts" setup>
import { PubBreadcrumb, PubBreadcrumbItem } from 'vuelicity'
</script>

Custom Icons

Slot - arrow-icon and home-icon Usage

The arrow-icon and home-icon slots can be used to customize the icons used in the breadcrumb.

1. Home
2. Profile
3. Orders

<template>
  <pub-breadcrumb>
    <pub-breadcrumb-item
      home
      href="#"
    >
      <template #home-icon>
        <pub-icon name="folder" />
      </template>
      Home
    </pub-breadcrumb-item>
    <pub-breadcrumb-item href="#">
      <template #arrow-icon>
        <pub-icon name="arrow-right" />
      </template>
      Profile
    </pub-breadcrumb-item>
    <pub-breadcrumb-item>
      <template #arrow-icon>
        <pub-icon name="arrow-right" />
      </template>
      Orders
    </pub-breadcrumb-item>
  </pub-breadcrumb>
</template>

<script lang="ts" setup>
import { PubBreadcrumb, PubBreadcrumbItem, PubIcon } from 'vuelicity'
</script>

Reference

PubBreadcrumb

Properties

Name	Type	Default	Description	Options
solid	Boolean	false	Whether the breadcrumb should have a solid background.

Slots

Name	Description
default	Slot for PubBreadcrumbItem components.

PubBreadcrumbItem

Properties

Name	Type	Default	Description	Options
href	String	null	The URL to navigate to when the link is clicked.
home	Boolean	false	The icon to display next to the link text.

Slots

Name	Description
default	Slot for the link text.
home-icon	Slot for the home icon.
arrow-icon	Slot for the arrow icon.