Breadcrumbs

Breadcrumbs provide a navigation aid that shows users their current location within a site's hierarchy, allowing them to trace their path back to previous pages easily.

Overview

Usage

When to Use This Component

Breadcrumbs are used in websites and applications to provide users with a navigational trail from the current page back to the homepage or root of the content hierarchy. They are ideal for complex structures with multiple levels of navigation, helping users understand their current position and navigate easily.

How It Works

A breadcrumb component typically displays a series of links representing the path from the homepage to the current page. Each link corresponds to a level in the hierarchy, enabling users to navigate back to previous levels. Breadcrumbs can feature icons, text, or a combination of both to represent each level, with dividers visually separating the links for clarity.

Code

Vanilla Js

<dda-breadcrumb
    design="text"
    separator="chevron_right"
    custom_class=""
    component_mode=""
    data-breadcrumbs='[{"text":"Home","icon":"home","url":"/"},
                        {"text":"Library","icon":"menu_book","url":"/library"},
                        {"text":"Data","icon":"storage"}]'
></dda-breadcrumb>

React

<dda-breadcrumb
    design="text"
    separator="chevron_right"
    custom_class=""
    component_mode=""
    data-breadcrumbs='[{"text":"Home","icon":"home","url":"/"},
                        {"text":"Library","icon":"menu_book","url":"/library"},
                        {"text":"Data","icon":"storage"}]'
></dda-breadcrumb>

Vue

  <DdaBreadcrumb
            design="text"
            separator="chevron-right"
            custom_class=""
            component_mode=""
            data-breadcrumbs='[{"text":"Home","icon":"home","url":"/"},{"text":"Library","icon":"menu_book","url":"/library"},{"text":"Data","icon":"storage","url":"/data"}]'
        ></DdaBreadcrumb>

Angular

<dda-breadcrumb
    design="text"
    separator="chevron-right"
    custom_class=""
    component_mode=""
    data-breadcrumbs='[{"text":"Home","icon":"home","url":"/"},{"text":"Library","icon":"menu_book","url":"/library"},{"text":"Data","icon":"storage","url":"/data"}]'
></dda-breadcrumb>

Properties

Property	Description	Type
component_mode	Defines an optional mode/class for additional styling or behavior customization.	string
custom_class	Allows the user to add custom CSS classes to the breadcrumb navigation for additional styling.	string
design	Defines the appearance of breadcrumb items. 'text': Displays only text. 'icon-text': Displays both an icon and text. 'icon': Displays only an icon.	"icon" | "icon-text" | "text"
separator	Determines the icon used as the separator between breadcrumb items.	"chevron_right" | "pen_size_2"

Anatomy

Anatomy Options

Lead Icon: Positioned at the beginning of the breadcrumb trail, the lead icon (e.g., a home icon) visually represents the starting point or main category in the navigation path. It provides a quick visual cue for users to identify the home or root page.

Label: Each label in the breadcrumb trail represents a level or section within the navigation hierarchy, showing users their current location relative to previous pages. Labels guide users through the navigation path, helping them understand how they reached the current page.

Trail Icon: Positioned at the end of the breadcrumb trail, the trail icon represents the final destination or current page within the navigation path. This icon provides a visual indicator of the endpoint, helping users identify the active or last section in the breadcrumb sequence.

Dos and Don'ts

Dos	Don'ts
Use breadcrumbs to show the user's location within the content hierarchy.	Don't use breadcrumbs for single-level navigation.
Label each breadcrumb link clearly to indicate its destination.	Avoid using ambiguous or unclear labels for breadcrumb links.
Ensure breadcrumb links are large enough to be easily tappable or clickable.	Don't make breadcrumb links too small to interact with comfortably.
Use consistent styling and spacing across all breadcrumbs in the application.	Don't use inconsistent styles that may confuse users.
Provide clear visual feedback when a breadcrumb link is hovered over or clicked.	Don't leave users guessing whether their interaction was successful.
Use appropriate dividers to separate breadcrumb links visually.	Don't overcrowd breadcrumbs with too many elements.