Breadcrumb

A secondary navigation that shows the path from the root to the current page. The last item is marked as current and rendered as non-linked text.

Playground

Separator

Labels

Theme

Href

Current

Separator

HTMLReact

ShareCopy

Usage

<lt-breadcrumb>
<lt-breadcrumb-item href="/">Home</lt-breadcrumb-item>
<lt-breadcrumb-item href="/components">Components</lt-breadcrumb-item>
<lt-breadcrumb-item current>Breadcrumb</lt-breadcrumb-item>
</lt-breadcrumb>

import { Breadcrumb, BreadcrumbItem } from '@latty-ds/react';

<Breadcrumb>
<BreadcrumbItem href="/">Home</BreadcrumbItem>
<BreadcrumbItem href="/components">Components</BreadcrumbItem>
<BreadcrumbItem current>Breadcrumb</BreadcrumbItem>
</Breadcrumb>

<template>
<lt-breadcrumb>
  <lt-breadcrumb-item href="/">Home</lt-breadcrumb-item>
  <lt-breadcrumb-item href="/components">Components</lt-breadcrumb-item>
  <lt-breadcrumb-item current>Breadcrumb</lt-breadcrumb-item>
</lt-breadcrumb>
</template>

API