Breadcrumbs
A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order. It helps users find their place.
<template>
<nav class="inline-flex items-center text-sm font-normal font-body">
<ol class="flex w-auto leading-none group md:flex-wrap">
<li class="flex items-center sm:hidden text-neutral-500">
<SfDropdown v-model="dropdownOpened" strategy="absolute" placement="bottom-start" @update:model-value="close">
<template #trigger>
<SfButton
class="relative w-5 h-5 !p-0 rounded-sm outline-secondary-600 hover:bg-transparent active:bg-transparent"
aria-label="More breadcrumbs"
variant="tertiary"
square
@click="toggle"
>
<template #prefix>
<SfIconMoreHoriz
size="sm"
class="text-neutral-500 hover:text-primary-700 active:text-primary-800 active:bg-transparent"
/>
</template>
</SfButton>
</template>
<div class="px-4 py-2 rounded-md shadow-md border-neutral-100">
<li v-for="item in breadcrumbs" :key="item.name" class="py-2 last-of-type:hidden">
<SfLink
:href="item.link"
variant="secondary"
class="leading-5 no-underline text-inherit hover:underline active:underline whitespace-nowrap outline-secondary-600"
>
{{ item.name }}
</SfLink>
</li>
</div>
</SfDropdown>
</li>
<li
v-for="(item, index) in breadcrumbs"
:key="item.name"
class="peer hidden sm:flex items-center peer-[:nth-of-type(even)]:before:content-['/'] peer-[:nth-of-type(even)]:before:px-2 peer-[:nth-of-type(even)]:before:leading-5 last-of-type:flex last-of-type:before:font-normal last-of-type:before:text-neutral-500 text-neutral-500 last-of-type:text-neutral-900 last-of-type:font-medium"
>
<SfLink
v-if="index < breadcrumbs.length - 1"
:href="item.link"
variant="secondary"
class="leading-5 no-underline hover:underline active:underline whitespace-nowrap outline-secondary-600 text-inherit"
>
{{ item.name }}
</SfLink>
<span v-else>
{{ item.name }}
</span>
</li>
</ol>
</nav>
</template>
<script lang="ts" setup>
import { SfDropdown, SfButton, SfLink, SfIconMoreHoriz } from '@storefront-ui/vue';
import { ref } from 'vue';
const breadcrumbs = [
{
name: 'Home',
link: '#',
},
{ name: 'Page 2', link: '#' },
{ name: 'Page 3', link: '#' },
{ name: 'Page 4', link: '#' },
{ name: 'Page 5', link: '#' },
];
const dropdownOpened = ref(false);
const close = () => {
dropdownOpened.value = false;
};
const toggle = () => {
dropdownOpened.value = !dropdownOpened.value;
};
</script>
Breadcrumbs with icon separator
Breadcrumbs block with icons as a item separator.
<template>
<nav class="inline-flex items-center text-sm font-normal font-body">
<ol class="flex w-auto leading-none group md:flex-wrap">
<li class="flex items-center sm:hidden text-neutral-500">
<SfDropdown v-model="dropdownOpened" strategy="absolute" placement="bottom-start" @update:model-value="close">
<template #trigger>
<SfButton
class="relative w-5 h-5 !p-0 rounded-sm outline-secondary-600 hover:bg-transparent active:bg-transparent"
aria-label="More breadcrumbs"
variant="tertiary"
square
@click="toggle"
>
<template #prefix>
<SfIconMoreHoriz
size="sm"
class="text-neutral-500 hover:text-primary-700 active:text-primary-800 active:bg-transparent"
/>
</template>
</SfButton>
</template>
<div class="px-4 py-2 rounded-md shadow-md border-neutral-100">
<li v-for="item in breadcrumbs" :key="item.name" class="py-2 last-of-type:hidden">
<SfLink
:href="item.link"
variant="secondary"
class="leading-5 no-underline text-inherit hover:underline active:underline whitespace-nowrap outline-secondary-600"
>
{{ item.name }}
</SfLink>
</li>
</div>
</SfDropdown>
</li>
<li
v-for="(item, index) in breadcrumbs"
:key="item.name"
icon=""
class="peer hidden sm:flex items-center peer-[:nth-of-type(even)]:before:content-[url('https://storage.googleapis.com/sfui_docs_artifacts_bucket_public/production/chevron_right.svg')] peer-[:nth-of-type(even)]:before:inline-flex last-of-type:flex last-of-type:before:font-normal last-of-type:before:text-neutral-500 text-neutral-500 last-of-type:text-neutral-900 last-of-type:font-medium"
>
<SfLink
v-if="index < breadcrumbs.length - 1"
:href="item.link"
variant="secondary"
class="leading-5 no-underline hover:underline active:underline whitespace-nowrap outline-secondary-600 text-inherit"
>
{{ item.name }}
</SfLink>
<span v-else>
{{ item.name }}
</span>
</li>
</ol>
</nav>
</template>
<script lang="ts" setup>
import { SfDropdown, SfButton, SfLink, SfIconMoreHoriz } from '@storefront-ui/vue';
import { ref } from 'vue';
const breadcrumbs = [
{
name: 'Home',
link: '#',
},
{ name: 'Page 2', link: '#' },
{ name: 'Page 3', link: '#' },
{ name: 'Page 4', link: '#' },
{ name: 'Page 5', link: '#' },
];
const dropdownOpened = ref(false);
const close = () => {
dropdownOpened.value = false;
};
const toggle = () => {
dropdownOpened.value = !dropdownOpened.value;
};
</script>
Breadcrumbs with home icon
Breadcrumbs block with home icon as the first item.
<template>
<nav class="inline-flex items-center text-sm font-normal font-body">
<ol class="flex w-auto leading-none group md:flex-wrap">
<li class="flex items-center sm:hidden text-neutral-500">
<SfDropdown v-model="dropdownOpened" strategy="absolute" placement="bottom-start" @update:model-value="close">
<template #trigger>
<SfButton
class="relative w-5 h-5 !p-0 rounded-sm outline-secondary-600 hover:bg-transparent active:bg-transparent"
aria-label="More breadcrumbs"
variant="tertiary"
square
@click="toggle"
>
<template #prefix>
<SfIconMoreHoriz
size="sm"
class="text-neutral-500 hover:text-primary-700 active:text-primary-800 active:bg-transparent"
/>
</template>
</SfButton>
</template>
<div class="px-4 py-2 rounded-md shadow-md border-neutral-100">
<li v-for="item in breadcrumbs" :key="item.name" class="py-2 last-of-type:hidden">
<SfLink
:href="item.link"
variant="secondary"
class="leading-5 no-underline text-inherit hover:underline active:underline whitespace-nowrap outline-secondary-600"
>
{{ item.name }}
</SfLink>
</li>
</div>
</SfDropdown>
</li>
<li
v-for="(item, index) in breadcrumbs"
:key="item.name"
class="peer hidden sm:flex items-center peer-[:nth-of-type(even)]:before:content-['/'] peer-[:nth-of-type(even)]:before:px-2 peer-[:nth-of-type(even)]:before:leading-5 last-of-type:flex last-of-type:before:font-normal last-of-type:before:text-neutral-500 text-neutral-500 last-of-type:text-neutral-900 last-of-type:font-medium"
>
<SfLink
v-if="index === 0"
:href="item.link"
variant="secondary"
class="inline-flex leading-5 no-underline hover:underline active:underline whitespace-nowrap outline-secondary-600 text-neutral-500"
>
<SfIconHome size="sm" />
</SfLink>
<SfLink
v-else-if="index < breadcrumbs.length - 1"
:href="item.link"
variant="secondary"
class="leading-5 no-underline hover:underline active:underline whitespace-nowrap outline-secondary-600 text-inherit"
>
{{ item.name }}
</SfLink>
<span v-else>
{{ item.name }}
</span>
</li>
</ol>
</nav>
</template>
<script lang="ts" setup>
import { SfDropdown, SfButton, SfLink, SfIconMoreHoriz, SfIconHome } from '@storefront-ui/vue';
import { ref } from 'vue';
const breadcrumbs = [
{
name: 'Home',
link: '#',
},
{ name: 'Page 2', link: '#' },
{ name: 'Page 3', link: '#' },
{ name: 'Page 4', link: '#' },
{ name: 'Page 5', link: '#' },
];
const dropdownOpened = ref(false);
const close = () => {
dropdownOpened.value = false;
};
const toggle = () => {
dropdownOpened.value = !dropdownOpened.value;
};
</script>