Add breadcrumbs to search dialog

[Bartek532]

What problem will this feature address?

When using search dialog I encountered an issue when multiple pages are named the same. Then, user won't know which section they belong to. (it's nested page)

Describe the solution you'd like

Display breadcrumb above page title to easily differentiate it.

Describe alternatives you've considered

Making my own search dialog? Not sure.

Additional context

No response

[fuma-nama]

I see, as a temporarily fix, if you don’t mind, you can change the passed search index title in route.ts. Adding the directory name to title could fix the issue for now.

PR welcome

[fuma-nama]

I think I'll suggest this solution instead.

import { source } from '@/lib/source';
import { createFromSource } from 'fumadocs-core/search/server';
import { getBreadcrumbItems } from 'fumadocs-core/breadcrumb';

export const { GET } = createFromSource(source, (page) => ({
  title: getBreadcrumbItems(page.url, source.pageTree)
    .map((item) => item.name)
    .join(' > '),
  description: page.data.description,
  url: page.url,
  structuredData: page.data.structuredData,
  id: page.url,
}));

I normally recommend to not use the same title for different documents, it keeps the search dialog clean since we group results with pages instead of folders.

I have also observed most of the docs sites, almost none of them have a similar design so I decided to not adapt this on Fumadocs UI. Plus it's not too difficult with the breadcrumbs utility from core, I'll close this issue for now

[Bartek532]

What is createFromSource? I can see only createSearchAPI, is it something different?

[fuma-nama]

A new API from v14, it's a replacement for create search API, allowing i18n support without changing anything.

[Bartek532]

Thanks! I implemented this and got empty title for my index.tsx file, which is title "Introduction", shouldn't breadcrumbs work for root file also?

[Bartek532]

Thanks! I implemented this and got empty title for my index.tsx file, which is title "Introduction", shouldn't breadcrumbs work for root file also?

As you can see it's working for "Extras" so it's an issue for index.mdx only 🤔

[fuma-nama]

Just use page.data.title if it returned an empty array

[fuma-nama]

And thanks for reporting it, fixed it on v14