Variants

Different configurations and states available for breadcrumb components to accommodate various navigation requirements, device contexts, and hierarchical presentation needs. These variants provide flexibility in appearance, interaction patterns, and spatial organization while maintaining design consistency across the system.

Large Breadcrumb

Navigation elements that display hierarchical path information and enable efficient wayfinding across complex site structures. These components serve as the primary navigation aid for desktop and tablet environments, adapting their appearance and interaction patterns based on content depth, visual separation preferences, and spatial organization to provide clear navigation context and maintain consistent user experience across all breadcrumb scenarios.

Type Variants

Visual presentation configurations that determine the separator styling and visual hierarchy between navigation elements. These variants control the aesthetic approach and readability characteristics for different design contexts and information clarity requirements.

Text Separator

Standard breadcrumb presentation with text-based separators for clear path hierarchy. Use for traditional navigation displays, text-focused interfaces, or when maintaining consistent typographic treatment across navigation elements.

Icon Separator

Enhanced breadcrumb presentation with icon-based separators for visual clarity and modern aesthetic. Use for contemporary interfaces, icon-rich designs, or when visual elements improve navigation comprehension and user experience.

Spacing Variants

Layout configurations that control the breadcrumb's internal padding and visual organization to optimize navigation usability and interface integration. These variants determine the visual density and spacing relationships for different layout contexts and design requirements.

Regular

Standard spacing with balanced padding for optimal navigation comfort and clear path separation. Use for most breadcrumb implementations requiring comfortable navigation interaction, standard interface layouts, or when maintaining optimal balance between navigation usability and interface integration.

Flush

Minimal spacing with reduced padding for compact navigation layouts and space-efficient path presentation. Use when maximizing content area, dense interface designs, or when navigation elements need minimal visual separation while maintaining functional clarity.

Small Breadcrumb

Navigation elements optimized for mobile devices and space-constrained environments that provide efficient path navigation through simplified interaction patterns. These components serve as the primary navigation aid for mobile environments, adapting their appearance and functionality based on screen limitations, touch interaction requirements, and simplified navigation patterns to provide clear wayfinding while maintaining usability within mobile interface constraints.

Type Variants

Visual presentation configurations that determine the separator styling and visual hierarchy between navigation elements in mobile environments. These variants control the aesthetic approach and readability characteristics for different mobile design contexts and touch interaction requirements.

Text Separator

Standard mobile breadcrumb presentation with text-based separators for clear path hierarchy and touch accessibility. Use for traditional mobile navigation displays, text-focused mobile interfaces, or when maintaining consistent typographic treatment across mobile navigation elements.

Icon Separator

Enhanced mobile breadcrumb presentation with icon-based separators for visual clarity and modern mobile aesthetic. Use for contemporary mobile interfaces, icon-rich mobile designs, or when visual elements improve navigation comprehension and touch interaction on mobile devices.

Parent Button

Simplified navigation pattern with back button functionality for efficient parent page navigation. Use when space constraints require minimal navigation elements, single-level back navigation, or when providing streamlined mobile navigation experience instead of full path display.

Spacing Variants

Layout configurations that control the mobile breadcrumb's internal padding and visual organization to optimize touch interaction and mobile interface integration. These variants determine the visual density and spacing relationships for different mobile contexts and design requirements.

Regular

Standard mobile spacing with balanced padding for optimal touch interaction and clear navigation presentation. Use for most mobile breadcrumb implementations requiring comfortable touch navigation, standard mobile layouts, or when maintaining optimal balance between navigation usability and mobile interface integration.

Flush

Minimal mobile spacing with reduced padding for compact navigation layouts and maximum content area utilization. Use when maximizing mobile content visibility, dense mobile interfaces, or when navigation elements need minimal visual separation while maintaining functional touch interaction.