Breadcrumb

Trailblazing Navigation with Breadcrumb Brilliance!

Elevate your user experience to new heights with our Breadcrumb Component, a seamless and intuitive way to guide users through the digital landscape. This feature-rich element, 18 variant component ensures that users never feel lost, offering a clear and concise path back to key pages. Enhance your website's usability and keep your audience engaged effortlessly.

Anatomy

The Breadcrumb Component comprises a series of clickable links, each representing a step in the user's journey. It typically appears near the top of a webpage, showcasing the hierarchical structure of the site. The links progress from left to right, providing a visual representation of the user's location within the website's content hierarchy.

anatomy of breadcrumb component

Properties

Customize your Breadcrumb Component with ease! Tailor its appearance and behavior to suit your design requirements. From adjusting link styles to defining separator symbols, our component properties empower you to integrate the breadcrumb seamlessly into your unique design language.

Separator	Size
Arrow	Small
Slash	Medium
	Large

Separator

• The arrow icon ">", used denote the hierarchy between breadcrumb items.

• The slash icon "/", used as the separator between breadcrumb items

React

import React from 'react';
import { PlusBreadcrumb, PlusLink } from '@plusui/react';

const BreadcrumbWithSeparator = () => (
  <>
    {/* Arrow (>) Separator */}
    <PlusBreadcrumb separator=">">
      <PlusLink href="#">
        <i className="fa-solid fa-house-chimney-medical"></i>
        Dashboard
      </PlusLink>
      <PlusLink href="#">Reports</PlusLink>
      <PlusLink href="#">Sales</PlusLink>
      <PlusLink href="#">Monthly</PlusLink>
      <PlusLink href="#">February</PlusLink>
    </PlusBreadcrumb>
    
    {/* Slash (/) Separator */}
    <PlusBreadcrumb separator="/">
      <PlusLink href="#">
        <i className="fa-solid fa-house-chimney-medical"></i>
        Home
      </PlusLink>
      <PlusLink href="#">Products</PlusLink>
      <PlusLink href="#">Electronics</PlusLink>
      <PlusLink href="#">Laptops</PlusLink>
      <PlusLink href="#">Dell</PlusLink>
    </PlusBreadcrumb>
  </>
);

export default BreadcrumbWithSeparator;

Angular

<!-- Arrow (>) Separator -->
<plus-breadcrumb separator=">">
  <plus-link href="#">
    <i class="fa-solid fa-house-chimney-medical"></i> Dashboard
  </plus-link>
  <plus-link href="#">Reports</plus-link>
  <plus-link href="#">Sales</plus-link>
  <plus-link href="#">Monthly</plus-link>
  <plus-link href="#">February</plus-link>
</plus-breadcrumb>

<!-- Slash (/) Separator -->
<plus-breadcrumb separator="/">
  <plus-link href="#">
    <i class="fa-solid fa-house-chimney-medical"></i> Home
  </plus-link>
  <plus-link href="#">Products</plus-link>
  <plus-link href="#">Electronics</plus-link>
  <plus-link href="#">Laptops</plus-link>
  <plus-link href="#">Dell</plus-link>
</plus-breadcrumb>

Vue

<template>
  <!-- Arrow (>) Separator -->
  <plus-breadcrumb separator=">">
    <plus-link href="#">
      <i class="fa-solid fa-house-chimney-medical"></i> Dashboard
    </plus-link>
    <plus-link href="#">Reports</plus-link>
    <plus-link href="#">Sales</plus-link>
    <plus-link href="#">Monthly</plus-link>
    <plus-link href="#">February</plus-link>
  </plus-breadcrumb>
  
  <!-- Slash (/) Separator -->
  <plus-breadcrumb separator="/">
    <plus-link href="#">
      <i class="fa-solid fa-house-chimney-medical"></i> Home
    </plus-link>
    <plus-link href="#">Products</plus-link>
    <plus-link href="#">Electronics</plus-link>
    <plus-link href="#">Laptops</plus-link>
    <plus-link href="#">Dell</plus-link>
  </plus-breadcrumb>
</template>

Javascript

<!-- Arrow (>) Separator -->
<plus-breadcrumb separator=">">
  <plus-link href="#">
    <i class="fa-solid fa-house-chimney-medical"></i> Dashboard
  </plus-link>
  <plus-link href="#">Reports</plus-link>
  <plus-link href="#">Sales</plus-link>
  <plus-link href="#">Monthly</plus-link>
  <plus-link href="#">February</plus-link>
</plus-breadcrumb>

<!-- Slash (/) Separator -->
<plus-breadcrumb separator="/">
  <plus-link href="#">
    <i class="fa-solid fa-house-chimney-medical"></i> Home
  </plus-link>
  <plus-link href="#">Products</plus-link>
  <plus-link href="#">Electronics</plus-link>
  <plus-link href="#">Laptops</plus-link>
  <plus-link href="#">Dell</plus-link>
</plus-breadcrumb>

Size

Our button component supports different sizes such as small, medium, large to fit various design requirements.

React

import React from 'react';
import { PlusBreadcrumb, PlusLink } from '@plusui/react';

const BreadcrumbWithSize = () => (
  <>
    <PlusBreadcrumb size="sm" separator="/">
      <PlusLink href="#">Home</PlusLink>
      <PlusLink href="#">Products</PlusLink>
      <PlusLink href="#">Electronics</PlusLink>
      <PlusLink href="#">Laptops</PlusLink>
    </PlusBreadcrumb>  {/* Small size */}
  </>
);

export default BreadcrumbWithSize;

Angular

<plus-breadcrumb size="sm" separator="/">
  <plus-link href="#">Home</plus-link>
  <plus-link href="#">Products</plus-link>
  <plus-link href="#">Electronics</plus-link>
  <plus-link href="#">Laptops</plus-link>
</plus-breadcrumb>  <!-- Small size -->

Vue

<template>
  <plus-breadcrumb size="sm" separator="/">
    <plus-link href="#">Home</plus-link>
    <plus-link href="#">Products</plus-link>
    <plus-link href="#">Electronics</plus-link>
    <plus-link href="#">Laptops</plus-link>
  </plus-breadcrumb>  <!-- Small size -->
</template>

Javascript

<plus-breadcrumb size="sm" separator="/">
  <plus-link href="#">Home</plus-link>
  <plus-link href="#">Products</plus-link>
  <plus-link href="#">Electronics</plus-link>
  <plus-link href="#">Laptops</plus-link>
</plus-breadcrumb>  <!-- Small size -->

Layout & Spacing

Achieve pixel-perfect precision with our Breadcrumb Component's flexible layout and spacing options. Whether you prefer a compact design or a more spacious arrangement, you have the tools to ensure the component seamlessly integrates into your layout, maintaining visual harmony and balance.

layout and spacing of breadcrumb component

Light & Dark Mode

Adapt to your users' preferences effortlessly with our Breadcrumb Component's built-in light and dark mode support. Enhance readability and aesthetics by seamlessly transitioning between these modes, ensuring a cohesive and visually pleasing experience in any lighting condition.

light and dark mode of breadcrumb component

Accessibility

Champion inclusivity with our Breadcrumb Component's commitment to accessibility. Built with industry-leading standards in mind, it ensures a smooth experience for all users, including those with disabilities. Screen reader compatibility, keyboard navigation, and high contrast options are just a few features that make our Breadcrumb Component accessible to everyone.

Criteria	Description	Status
ARIA Hidden Elements	Ensures aria-hidden elements are not focusable nor contain focusable elements	✔️ Passed
Inline Text Spacing	Ensure that text spacing set through style attributes can be adjusted with custom stylesheets	✔️ Passed
ID’s of active elements	Ensures every id attribute value of active elements is unique	✔️ Passed
ID Attribute	Ensures every id attribute value is unique	✔️ Passed
Discernible Text	Ensures links have discernible text	✔️ Passed
Tabindex Attribute	Ensures tabindex attribute values are not greater than 0	✔️ Passed
Color Contrast	Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds.	✔️ AA ~ AAA

Design System

Plus UI Design System | Figma CommunityFigma

Plus UI Design System on Figma

API

Property	Description	Type	Accepted Values	Default
separator	Sets the separator between breadcrumb items	String	Any valid string (e.g., "/", "→", ">")	"/"
size	Determines the size of the breadcrumb	String	sm, md, lg	md