Skip to content

Breadcrumb Component

A navigation component that shows the current page's location within a website's hierarchy.

Overview

The Breadcrumb component provides:

  • Clear navigation path visualization
  • Automatic route handling with Vue Router
  • Customizable separators and spacing
  • Support for disabled states
  • Flexible styling options

When to Use

Use the Breadcrumb component when you need to:

  • Show users their current location in a website
  • Provide easy navigation to parent pages
  • Create a hierarchical navigation structure
  • Help users understand the site's organization
  • Improve website navigation and user experience

Key Features

  • Route Integration: Seamless integration with Vue Router for navigation
  • Custom Separators: Choose your own separator character or use custom content
  • Flexible Spacing: Adjust the gap between items using CSS units
  • Disabled States: Mark items as non-clickable when needed
  • Customizable: Use slots to customize the separator appearance
  • Responsive: Adapts to different screen sizes and content lengths

API Reference →

View Code →