[Astro] How to Implement Breadcrumbs

Astro is a static site generator that allows you to build fast, SEO-friendly websites. This article explains how to implement breadcrumb navigation using Astro.

What are breadcrumbs?

Breadcrumbs are a website navigation element consisting of a list of links that indicate the hierarchical structure of the current page. Typically, they display the path from the home page to the current page, making it easier for users to navigate the site.

Steps to implement breadcrumbs in Astro

1. Create a Breadcrumb.astro file in the src/components directory.
2. Add the following code to the Breadcrumb.astro file:

   ---
   const { currentPage } = Astro.props;
   const pages = [
     { name: 'Home', href: '/' },
     { name: 'Category', href: '/category' },
     { name: currentPage, href: '#' },
   ];
   ---
   
   <nav>
     <ol>
       {pages.map((page, index) => (
         <li>
           {index === pages.length - 1 ? (
             <span>{page.name}</span>
           ) : (
             <a href={page.href}>{page.name}</a>
           )}
         </li>
       ))}
     </ol>
   </nav>

3. In the Astro file of the page where you want to display breadcrumbs, import the Breadcrumb component and pass the current page name to the currentPage property.

   ---
   import Breadcrumb from '../components/Breadcrumb.astro';
   ---
   
   <Breadcrumb currentPage="Current Page" />

4. Style the breadcrumbs using CSS.

   nav ol {
     display: flex;
     list-style: none;
     padding: 0;
   }
   
   nav li:not(:last-child)::after {
     content: '>';
     margin: 0 0.5rem;
   }

With the steps above, you can implement breadcrumbs using Astro.

Explanation

• In the Breadcrumb.astro file, currentPage is retrieved from Astro.props, and the breadcrumb hierarchy is defined in the pages array.
• Map over the pages array to display the links and page names. Because the last element is the current page, it is displayed as a span tag rather than a link.
• On pages where you want to display breadcrumbs, import the Breadcrumb component and pass the current page name to the currentPage property.
• In the CSS, display: flex is used to arrange the list items horizontally, and the ::after pseudo-element adds a separator (>).

Introducing breadcrumbs makes it easier for users to grasp their current location within a site, improving navigational usability. With Astro, breadcrumbs can be implemented as a simple component, making it easy to add them while maintaining a consistent design across the entire site.