Last updated

breadcrumbs

Use the breadcrumbs option to control the links displayed at the top of the page to indicate a page's location in the navigation structure.

The breadcrumbs option also supports page-level configuration using front matter.

Screenshot of page in project with breadcrumbs

Breadcrumbs are enabled by default, but can be disabled to remove them from your published project. You can also add links that you want to always appear on every page at the start of the breadcrumbs links.

Options

OptionTypeDescription
hidebooleanDisables breadcrumb links in the project when set to true.
Default value: false
prefixItems[Breadcrumb object]A list of breadcrumb links to always be displayed first.
OptionTypeDescription
pagestringREQUIRED. Path to the file which represents the page to link to. If you do not include the label property, the text for the link will match the level 1 heading of the page.
labelstringLink text displayed for the item.
labelTranslationKeystringTranslation key used for localization.

Example

breadcrumbs:
  hide: false
  prefixItems:
    - page: index.page.tsx
      label: Home
      labelTranslationKey: home.title
  • Customize other default items on Markdown pages, such as the last updated time stamp and the page headings table of contents on the left side of the page, using the markdown configuration options.
  • Remove or update the label text for the previous and next navigation buttons using the navigation configuration options.

Resources

  • Learn more about the different navigation elements included in your project in the Navigation concept documentation.
  • Follow steps to customize your navigation elements including the sidebar, navbar, and footer, in the Configure navigation elements how-to documentation.
  • Use front matter to configure breadcrumbs on individual pages.
 
Next page