AvenUI.Components.Breadcrumb (AvenUI v1.0.0)

Copy Markdown View Source

Breadcrumb navigation component for showing page hierarchy.

Features

  • Semantic navigation structure
  • Responsive design
  • Customizable separators
  • Home link support
  • Collapsed mobile view

Examples

<%!-- Basic breadcrumb --%>
<.breadcrumb>
  <:item href="/dashboard">Dashboard</:item>
  <:item href="/projects">Projects</:item>
  <:item active>Project Details</:item>
</.breadcrumb>

<%!-- With custom separator --%>
<.breadcrumb separator="→">
  <:item href="/">Home</:item>
  <:item href="/products">Products</:item>
  <:item active>Product Details</:item>
</.breadcrumb>

<%!-- Icon breadcrumb --%>
<.breadcrumb>
  <:item href="/"><.icon name="home" /></:item>
  <:item href="/settings">Settings</:item>
  <:item active>Profile</:item>
</.breadcrumb>

Summary

Functions

Breadcrumb item with icon support.

Functions