Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Component Source

View the source code for the breadcrumb component.

$lib/components/ui/breadcrumb/index.ts

Installation

npx nnuikit add breadcrumb

import * as Breadcrumb from "$lib/components/ui/breadcrumb";

Usage

<script lang="ts">
 import * as Breadcrumb from "$lib/components/ui/breadcrumb
 <Breadcrumb.Root>
 <Breadcrumb.List>
  <Breadcrumb.Item>
   <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item>
   <Breadcrumb.Link href="/components">Components</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item>
   <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
  </Breadcrumb.Item>
 </Breadcrumb.List>
</Breadcrumb.Root>
 ";

Examples

Custom Separator

<script lang="ts">
 import * as Breadcrumb from "$lib/components/ui/breadcrumb";
 
 <Breadcrumb.Root>
                    <Breadcrumb.List>
                        <Breadcrumb.Item>
                            <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Separator />
                        <Breadcrumb.Item>
                            <Breadcrumb.Link href="/components"
                                >Components</Breadcrumb.Link
                            >
                        </Breadcrumb.Item>
                        <Breadcrumb.Separator />
                        <Breadcrumb.Item>
                            <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
                        </Breadcrumb.Item>
                    </Breadcrumb.List>
                </Breadcrumb.Root>

Dropdown

<script lang="ts">
 import * as Breadcrumb from "$lib/components/ui/breadcrumb";
 import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
 

 <Breadcrumb.Root>
                    <Breadcrumb.List>
                        <Breadcrumb.Item>
                            <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Separator />
                        <Breadcrumb.Item>
                            <DropdownMenu.Root>
                                <DropdownMenu.Trigger
                                    class="flex items-center gap-1"
                                >
                                    Components
                                    <IconChevronDown className="size-16 mx-4" />
                                </DropdownMenu.Trigger>
                                <DropdownMenu.Content align="start">
                                    <DropdownMenu.Item
                                        >Documentation</DropdownMenu.Item
                                    >
                                    <DropdownMenu.Item>Themes</DropdownMenu.Item
                                    >
                                    <DropdownMenu.Item>GitHub</DropdownMenu.Item
                                    >
                                </DropdownMenu.Content>
                            </DropdownMenu.Root>
                        </Breadcrumb.Item>
                        <Breadcrumb.Separator />
                        <Breadcrumb.Item>
                            <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
                        </Breadcrumb.Item>
                    </Breadcrumb.List>
                </Breadcrumb.Root>

Collapsed

<script lang="ts">
 import * as Breadcrumb from "$lib/components/ui/breadcrumb
 
<Breadcrumb.Root>
 <Breadcrumb.List>
  <Breadcrumb.Item>
   <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item>
   <Breadcrumb.Ellipsis />
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item>
   <Breadcrumb.Link href="/docs/components">Components</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item>
   <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
  </Breadcrumb.Item>
 </Breadcrumb.List>
</Breadcrumb.Root>

Accessibility

Semantic: renders inside nav with aria-label='breadcrumb'

Current page: aria-current='page' on the last item

Keyboard: all links are focusable and navigable

API Reference

Prop	Type	Default	Description
`ref`	`HTMLElement \| null`	null	Binding to the underlying HTML element.
`class`	`string`	undefined	CSS classes to apply to the component.

Breadcrumb.Link

Prop	Type	Default	Description
`href`	`string`	undefined	The URL that the link points to.
`child`	`Snippet`	undefined	Snippet to render a custom child (e.g. for routing libraries).