---
title: "UIKit breadcrumbs component"
date: "2020-11-20T08:17:55+00:00"
summary: "Enhance your Drupal site's navigation with UIKit's customizable breadcrumbs component. Learn how to implement and configure this essential user interface element for improved site usability and structure."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/uikit-breadcrumbs-component"
id: "fb6a486f-56ee-4088-b846-e1c48e982e27"
---

The breadcrumbs component provides a configurable breadcrumbs navigation bar to be placed at the top of page layouts. 

**Key information about this component:**

Layout canvas elements
----------------------

*   **Container -** Provides a container and background color to the breadcrumb navigation bar. It also allows the breadcrumbs to be **position:absolute** or **position:relative.**
*   **Breadcrumbs -** Provides the breadcrumb navigation links. Drupal provides the links displayed. 

Component form fields
---------------------

*   **Breadcrumb color -** Sets the color theme for the breadcrumbs. These include both link and background color.
*   **Breadcrumb position -** Sites the position of the breadcrumbs. Choose **Absolute position top left** to position the breadcrumbs at the top of the page content.