---
title: Breadcrumb
description: Displays the path to the current resource using a hierarchy of links.
---

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/breadcrumb"
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu"
)

templ BreadcrumbDemo() {
	@breadcrumb.Breadcrumb() {
		@breadcrumb.List() {
			@breadcrumb.Item() {
				@breadcrumb.Link(breadcrumb.LinkProps{Href: "#"}) {
					Home
				}
			}
			@breadcrumb.Separator()
			@breadcrumb.Item() {
				@dropdownmenu.DropdownMenu() {
					@button.Button(button.Props{
						Size:       button.SizeIconSm,
						Variant:    button.VariantGhost,
						Attributes: dropdownmenu.Trigger(ctx),
					}) {
						@breadcrumb.Ellipsis()
						<span class="sr-only">Toggle menu</span>
					}
					@dropdownmenu.Content(dropdownmenu.ContentProps{Align: dropdownmenu.AlignStart}) {
						@dropdownmenu.Group() {
							@dropdownmenu.Item() {
								Documentation
							}
							@dropdownmenu.Item() {
								Themes
							}
							@dropdownmenu.Item() {
								GitHub
							}
						}
					}
				}
			}
			@breadcrumb.Separator()
			@breadcrumb.Item() {
				@breadcrumb.Link(breadcrumb.LinkProps{Href: "#"}) {
					Components
				}
			}
			@breadcrumb.Separator()
			@breadcrumb.Item() {
				@breadcrumb.Page() {
					Breadcrumb
				}
			}
		}
	}
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
shadcn-templ add breadcrumb
```

</TabsContent>

<TabsContent value="manual">

<Steps className="mb-0 pt-2">

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="breadcrumb" title="components/breadcrumb/breadcrumb.templ" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```go showLineNumbers
import "github.com/axadrn/shadcn-templ/v2/components/breadcrumb"
```

```templ showLineNumbers
@breadcrumb.Breadcrumb() {
	@breadcrumb.List() {
		@breadcrumb.Item() {
			@breadcrumb.Link(breadcrumb.LinkProps{Href: "/"}) {
				Home
			}
		}
		@breadcrumb.Separator()
		@breadcrumb.Item() {
			@breadcrumb.Link(breadcrumb.LinkProps{Href: "/docs/components"}) {
				Components
			}
		}
		@breadcrumb.Separator()
		@breadcrumb.Item() {
			@breadcrumb.Page() {
				Breadcrumb
			}
		}
	}
}
```

## Composition

Use the following composition to build a `Breadcrumb`:

```text
breadcrumb.Breadcrumb
└── breadcrumb.List
    ├── breadcrumb.Item
    │   └── breadcrumb.Link
    ├── breadcrumb.Separator
    ├── breadcrumb.Item
    │   └── breadcrumb.Link
    ├── breadcrumb.Separator
    └── breadcrumb.Item
        └── breadcrumb.Page
```

## Basic

A basic breadcrumb with a home link and a components link.

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/breadcrumb"

templ BreadcrumbBasic() {
	@breadcrumb.Breadcrumb() {
		@breadcrumb.List() {
			@breadcrumb.Item() {
				@breadcrumb.Link(breadcrumb.LinkProps{Href: "#"}) {
					Home
				}
			}
			@breadcrumb.Separator()
			@breadcrumb.Item() {
				@breadcrumb.Link(breadcrumb.LinkProps{Href: "#"}) {
					Components
				}
			}
			@breadcrumb.Separator()
			@breadcrumb.Item() {
				@breadcrumb.Page() {
					Breadcrumb
				}
			}
		}
	}
}
```

## Custom separator

Pass custom children to `breadcrumb.Separator` to replace the default separator icon.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/breadcrumb"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ BreadcrumbSeparator() {
	@breadcrumb.Breadcrumb() {
		@breadcrumb.List() {
			@breadcrumb.Item() {
				@breadcrumb.Link(breadcrumb.LinkProps{Href: "/"}) {
					Home
				}
			}
			@breadcrumb.Separator() {
				@icon.Dot()
			}
			@breadcrumb.Item() {
				@breadcrumb.Link(breadcrumb.LinkProps{Href: "/docs/components"}) {
					Components
				}
			}
			@breadcrumb.Separator() {
				@icon.Dot()
			}
			@breadcrumb.Item() {
				@breadcrumb.Page() {
					Breadcrumb
				}
			}
		}
	}
}
```

## Dropdown

You can compose `breadcrumb.Item` with a `dropdownmenu` to create a dropdown in the breadcrumb.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/breadcrumb"
	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ BreadcrumbDropdown() {
	@breadcrumb.Breadcrumb() {
		@breadcrumb.List() {
			@breadcrumb.Item() {
				@breadcrumb.Link(breadcrumb.LinkProps{Href: "/"}) {
					Home
				}
			}
			@breadcrumb.Separator() {
				@icon.Dot()
			}
			@breadcrumb.Item() {
				@dropdownmenu.DropdownMenu() {
					<button class="flex items-center gap-1" { dropdownmenu.Trigger(ctx)... }>
						Components
						@icon.ChevronDown(icon.Props{Class: "size-3.5", Attributes: templ.Attributes{"data-icon": "inline-end"}})
					</button>
					@dropdownmenu.Content(dropdownmenu.ContentProps{Align: dropdownmenu.AlignStart}) {
						@dropdownmenu.Group() {
							@dropdownmenu.Item() {
								Documentation
							}
							@dropdownmenu.Item() {
								Themes
							}
							@dropdownmenu.Item() {
								GitHub
							}
						}
					}
				}
			}
			@breadcrumb.Separator() {
				@icon.Dot()
			}
			@breadcrumb.Item() {
				@breadcrumb.Page() {
					Breadcrumb
				}
			}
		}
	}
}
```

## Collapsed

We provide a `breadcrumb.Ellipsis` component to show a collapsed state when the breadcrumb is too long.

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/breadcrumb"

templ BreadcrumbEllipsisDemo() {
	@breadcrumb.Breadcrumb() {
		@breadcrumb.List() {
			@breadcrumb.Item() {
				@breadcrumb.Link(breadcrumb.LinkProps{Href: "/"}) {
					Home
				}
			}
			@breadcrumb.Separator()
			@breadcrumb.Item() {
				@breadcrumb.Ellipsis()
			}
			@breadcrumb.Separator()
			@breadcrumb.Item() {
				@breadcrumb.Link(breadcrumb.LinkProps{Href: "/docs/components"}) {
					Components
				}
			}
			@breadcrumb.Separator()
			@breadcrumb.Item() {
				@breadcrumb.Page() {
					Breadcrumb
				}
			}
		}
	}
}
```

## Link component

The `breadcrumb.Link` component renders a standard anchor. Set the `Href` prop to link a breadcrumb item.

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/breadcrumb"

templ BreadcrumbLink() {
	@breadcrumb.Breadcrumb() {
		@breadcrumb.List() {
			@breadcrumb.Item() {
				@breadcrumb.Link(breadcrumb.LinkProps{Href: "#link-component"}) {
					Home
				}
			}
			@breadcrumb.Separator()
			@breadcrumb.Item() {
				@breadcrumb.Link(breadcrumb.LinkProps{Href: "#link-component"}) {
					Components
				}
			}
			@breadcrumb.Separator()
			@breadcrumb.Item() {
				@breadcrumb.Page() {
					Breadcrumb
				}
			}
		}
	}
}
```

## API Reference

### Breadcrumb

The `Breadcrumb` component is the root navigation element that wraps all breadcrumb components.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### List

The `breadcrumb.List` component displays the ordered list of breadcrumb items.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### Item

The `breadcrumb.Item` component wraps individual breadcrumb items.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### Link

The `breadcrumb.Link` component displays a clickable link in the breadcrumb.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Href`  | `string` | -       |
| `Class` | `string` | -       |

### Page

The `breadcrumb.Page` component displays the current page in the breadcrumb (non-clickable).

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### Separator

The `breadcrumb.Separator` component displays a separator between breadcrumb items. Pass custom children to override the default separator icon.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `Class`     | `string` | -       |

### Ellipsis

The `breadcrumb.Ellipsis` component displays an ellipsis indicator for collapsed breadcrumb items.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |