DocsComponentsBreadcrumb

Breadcrumb

The path to the current page.

7 files

<pb-ui.breadcrumb>
  <pb-ui.breadcrumb-list>
    <pb-ui.breadcrumb-item><pb-ui.breadcrumb-link href="#">Home</pb-ui.breadcrumb-link></pb-ui.breadcrumb-item>
    <pb-ui.breadcrumb-separator />
    <pb-ui.breadcrumb-item><pb-ui.breadcrumb-ellipsis /></pb-ui.breadcrumb-item>
    <pb-ui.breadcrumb-separator />
    <pb-ui.breadcrumb-item><pb-ui.breadcrumb-link href="#">Components</pb-ui.breadcrumb-link></pb-ui.breadcrumb-item>
    <pb-ui.breadcrumb-separator />
    <pb-ui.breadcrumb-item><pb-ui.breadcrumb-page>Breadcrumb</pb-ui.breadcrumb-page></pb-ui.breadcrumb-item>
  </pb-ui.breadcrumb-list>
</pb-ui.breadcrumb>

Installation

pyblade-ui add breadcrumb

Copy these files into your project

components/ui/breadcrumb.html

<nav aria-label="breadcrumb" data-slot="breadcrumb" {{ attributes.cn("") }}>{{ slot }}</nav>

components/ui/breadcrumb_list.html

<ol data-slot="breadcrumb-list" {{ attributes.cn("flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5") }}>{{ slot }}</ol>

components/ui/breadcrumb_item.html

<li data-slot="breadcrumb-item" {{ attributes.cn("inline-flex items-center gap-1.5") }}>{{ slot }}</li>

components/ui/breadcrumb_link.html

@props({'href': '#'})
<a href="{{ href }}" data-slot="breadcrumb-link" {{ attributes.cn("transition-colors hover:text-foreground") }}>{{ slot }}</a>

components/ui/breadcrumb_page.html

<span role="link" aria-disabled="true" aria-current="page" data-slot="breadcrumb-page" {{ attributes.cn("font-normal text-foreground") }}>{{ slot }}</span>

components/ui/breadcrumb_separator.html

<li role="presentation" aria-hidden="true" data-slot="breadcrumb-separator" {{ attributes.cn("[&>svg]:size-3.5") }}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></li>

components/ui/breadcrumb_ellipsis.html

<span role="presentation" aria-hidden="true" data-slot="breadcrumb-ellipsis" {{ attributes.cn("flex size-9 items-center justify-center [&>svg]:size-4") }}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></span>

Update the path to fit your project
The components folder is the one set in pyblade.toml.

Usage

The tags <pb-ui.breadcrumb> <pb-ui.breadcrumb-list> <pb-ui.breadcrumb-item> <pb-ui.breadcrumb-link> <pb-ui.breadcrumb-page> <pb-ui.breadcrumb-separator> <pb-ui.breadcrumb-ellipsis> are available in all your templates.

<pb-ui.breadcrumb>
  <pb-ui.breadcrumb-list>
    <pb-ui.breadcrumb-item><pb-ui.breadcrumb-link href="/">Home</pb-ui.breadcrumb-link></pb-ui.breadcrumb-item>
    <pb-ui.breadcrumb-separator />
    <pb-ui.breadcrumb-item><pb-ui.breadcrumb-page>Settings</pb-ui.breadcrumb-page></pb-ui.breadcrumb-item>
  </pb-ui.breadcrumb-list>
</pb-ui.breadcrumb>

Props

Prop	Default
href	'#'

Any other attribute (class, id, x-on:click, hx-post…) is passed to the root element; your Tailwind classes win over the component's.

‹ Navigation menu Pagination ›