Skip to content

Replace back-links with breadcrumbs, fix truncation and remove duplication #5697

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
n-lark merged 2 commits into from
Aug 27, 2026
+9 −21
Merged

Replace back-links with breadcrumbs, fix truncation and remove duplication #5697

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
517eb47
Replace back-to links with breadcrumbs on blog, changelog, customer s…
sumitshinde-84 Aug 27, 2026
3d697f2
Apply shrink-0 to the first crumb only, so deep breadcrumbs shrink to…
n-lark Aug 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions nuxt/components/Breadcrumbs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,18 +17,18 @@ useSchemaOrg([
}),
])

// The indigo hover only makes sense on crumbs that actually navigate — a plain span
// (no `to`, e.g. the current page or a non-navigable group label) getting the same
// hover color as a real link falsely signals it's clickable.
const items = computed(() => props.items.map(item => ({
const displayItems = computed(() => props.items.map((item, index) => ({
...item,
ui: item.to ? { link: 'hover:text-indigo-600' } : undefined,
ui: {
...(item.to ? { link: 'hover:text-indigo-600' } : {}),
...(index === 0 && props.items.length > 1 ? { item: 'shrink-0' } : {}),
},
})))
</script>

<template>
<UBreadcrumb
:items="items"
:items="displayItems"
color="neutral"
class="capitalize"
:ui="{ link: 'text-sm' }"
Expand Down
6 changes: 1 addition & 5 deletions nuxt/pages/blog/[...slug].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,6 @@ if (routeInfo.value.kind === 'post') {
<div v-else-if="page" class="w-full page post">
<div class="post-title container m-auto text-center max-lg:px-6 flex mt-6 mb-6 md:max-w-screen-lg md:mt-12">
<div class="text-left md:pr-32">
<Breadcrumbs :items="breadcrumbItems" class="mb-2" />
<label>Article</label>
<h1>{{ page.title }}</h1>
<h4 v-if="page.subtitle">{{ page.subtitle }}</h4>
Expand Down Expand Up @@ -213,10 +212,7 @@ if (routeInfo.value.kind === 'post') {
<div class="blog nohero w-full pb-24">
<div class="container flex flex-col md:flex-row m-auto text-left max-lg:px-6 md:max-w-screen-lg gap-8 items-stretch">
<div class="ff-prose min-w-0">
<NuxtLink class="group hover:no-underline inline-flex items-center gap-1 mb-4" to="/blog">
<UIcon name="i-heroicons-chevron-left" />
<span class="group-hover:underline">Back to Blog Posts</span>
</NuxtLink>
<Breadcrumbs :items="breadcrumbItems" class="mb-4" />

<div class="prose w-full flex-grow">
<div class="mb-4 hero-img">
Expand Down
6 changes: 1 addition & 5 deletions nuxt/pages/changelog/[...slug].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,6 @@ useSeoMeta({
<div class="w-full page post">
<div class="post-title container m-auto text-center max-lg:px-6 flex mt-6 mb-6 md:max-w-screen-lg md:mt-12">
<div class="text-left md:pr-32">
<Breadcrumbs :items="breadcrumbItems" class="mb-2" />
<label>Changelog</label>
<h1>{{ page.title }}</h1>
<h4 v-if="page.subtitle">{{ page.subtitle }}</h4>
Expand All @@ -78,10 +77,7 @@ useSeoMeta({
<div class="blog nohero w-full pb-24">
<div class="container flex flex-col md:flex-row m-auto text-left max-lg:px-6 md:max-w-screen-lg gap-8 items-stretch">
<div class="ff-prose flex-grow">
<NuxtLink to="/changelog" class="inline-flex items-center gap-1 mb-4">
<UIcon name="i-heroicons-chevron-left" />
Back to the Changelog
</NuxtLink>
<Breadcrumbs :items="breadcrumbItems" class="mb-4" />
<div class="prose">
<ContentRenderer :value="page" />
</div>
Expand Down
6 changes: 1 addition & 5 deletions nuxt/pages/customer-stories/[slug].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,11 +101,7 @@ useSchemaOrg([

<div class="blog nohero w-full bg-gray-50 pb-24 pt-6">
<div class="container m-auto flex flex-col items-stretch text-left max-lg:px-6 md:max-w-screen-lg">
<Breadcrumbs :items="breadcrumbItems" class="mb-3" />
<NuxtLink to="/customer-stories" class="group mb-5 inline-flex items-center gap-1 hover:no-underline md:mb-4">
<UIcon name="i-heroicons-chevron-left" />
<span class="group-hover:underline">Back to Customer Stories</span>
</NuxtLink>
<Breadcrumbs :items="breadcrumbItems" class="mb-5 md:mb-4" />

<div class="ff-prose mb-6 flex flex-col-reverse border-b md:flex-row md:gap-8">
<div class="flex-grow">
Expand Down