Breadcrumb

Breadcrumb

A navigation component showing the current page location within a hierarchy.

Basic Usage

Default Breadcrumb

Basic breadcrumb navigation.

<ae-breadcrumb>
<ae-breadcrumb-item href="/">Home</ae-breadcrumb-item>
<ae-breadcrumb-item href="/products">Products</ae-breadcrumb-item>
<ae-breadcrumb-item current>Details</ae-breadcrumb-item>
</ae-breadcrumb>

Custom Separator

Custom Separator

Use different separator characters.

<div class="demo-column">
<ae-breadcrumb separator="/">
  <ae-breadcrumb-item href="/">Home</ae-breadcrumb-item>
  <ae-breadcrumb-item href="/docs">Docs</ae-breadcrumb-item>
  <ae-breadcrumb-item current>Guide</ae-breadcrumb-item>
</ae-breadcrumb>
<ae-breadcrumb separator=">">
  <ae-breadcrumb-item href="/">Home</ae-breadcrumb-item>
  <ae-breadcrumb-item href="/docs">Docs</ae-breadcrumb-item>
  <ae-breadcrumb-item current>Guide</ae-breadcrumb-item>
</ae-breadcrumb>
<ae-breadcrumb separator="•">
  <ae-breadcrumb-item href="/">Home</ae-breadcrumb-item>
  <ae-breadcrumb-item href="/docs">Docs</ae-breadcrumb-item>
  <ae-breadcrumb-item current>Guide</ae-breadcrumb-item>
</ae-breadcrumb>
</div>

Long Path

Deep Navigation

Breadcrumbs for deeply nested pages.

<ae-breadcrumb>
<ae-breadcrumb-item href="/">Home</ae-breadcrumb-item>
<ae-breadcrumb-item href="/category">Category</ae-breadcrumb-item>
<ae-breadcrumb-item href="/category/sub">Subcategory</ae-breadcrumb-item>
<ae-breadcrumb-item href="/category/sub/item">Item</ae-breadcrumb-item>
<ae-breadcrumb-item current>Details</ae-breadcrumb-item>
</ae-breadcrumb>

Installation

pnpm

pnpm add @aetherui-kit/core

npm

npm install @aetherui-kit/core

Import

import { defineAeBreadcrumb, defineAeBreadcrumbItem } from '@aetherui-kit/core/breadcrumb';
defineAeBreadcrumb();
defineAeBreadcrumbItem();

Breadcrumb Props

Name	Type	Default	Description
separator	string	'/'	Separator character

Breadcrumb Item Props

Name	Type	Default	Description
href	string	-	Link URL
current	boolean	false	Current page indicator

CSS Parts

ae-breadcrumb

Name	Description
base	Container element
list	The <ol> list

ae-breadcrumb-item

Name	Description
base	List item
link	Anchor element
separator	Separator element

Accessibility

• Uses <nav> with aria-label="Breadcrumb"
• Current page marked with aria-current="page"
• Uses semantic <ol> list structure