Aviana Development Logo
Startseite / Blog / How to create breadcrumbs in Webflow: A quick guide
Webflow Breadcrumbs.png

How to create breadcrumbs in Webflow: A quick guide

This tutorial will show you a quick and easy way of getting breadcrumbs into your Webflow project.

Bild von Armin Hirschfeld quadratisch.jpeg

Geschrieben von Armin Hirschfeld

Zuletzt aktualisiert: 07.06.2024

This guide is based on a video tutorial by Armin Hirschfeld, which provides a step-by-step walkthrough on how to implement breadcrumbs in Webflow.

Breadcrumbs are a secondary navigation system that shows a user's location in a website. They are a vital element in website design, especially for websites with a lot of pages. They improve the overall user experience by providing users with a way to keep track of their locations within programs, documents, or websites.

Getting Started

Before we dive in, you'll need to access the Github repository for the breadcrumbs. This repository contains all the necessary code you'll need to add breadcrumbs to your Webflow page.

Adding Breadcrumbs to Your Webflow Page

  1. Add a Container: The first step is to add a container to your Webflow page. This will serve as the space where your breadcrumbs will be displayed.

  2. Use the Embed Element: Next, use the embed element to insert the code from the Github repository into your container. This will create the breadcrumbs on your page.

Customizing Your Breadcrumbs

One of the key aspects of breadcrumbs is the title value of the page. It's crucial to always fill out this value as it forms part of the breadcrumb trail. For instance, if you're on a CMS collection page where the title is dynamic and changes depending on the country and language, you'll need to add a dynamic title.

Additionally, you may want to change the name of the home link depending on the country. This can be done by modifying the code from the Github repository.

It is explained in the video above.

Wrapping Up

And there you have it! With these simple steps, you can enhance your Webflow website's navigation by adding breadcrumbs. If you have any questions or run into any issues, feel free to leave a comment on the video tutorial or here on this blog post.

Remember, breadcrumbs are not just a tool for navigation; they also help with SEO. They make it easier for search engines to understand the structure of your website, which can lead to improved rankings. So, don't overlook this small but mighty feature!

Happy designing!


Benötigen Sie Hilfe oder wollen Sie einfach mit einem Experten austauschen? Kein Problem! Lassen Sie es uns wissen. Wir helfen Ihnen gerne weiter!

Jetzt professionelle Hilfe holen!

Bild von Armin Hirschfeld

„Hängst du irgendwo fest? Lass dir von unserem Team helfen. Buch dir ein Gespräch bei uns und wir finden eine Lösung!“

Erstgespräche sind bei uns zu 100% kostenfrei. Lass uns erstmal schauen, ob wir dir weiterhelfen können.