Breadcrumb

Breadcrumbs show users their current location within a website's hierarchy and provide navigation back to parent pages.

Preview

Usage

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbPage } from '@e-infra/design-system'

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Components

Component	Description
`Breadcrumb`	Container (nav element)
`BreadcrumbList`	List container (ol)
`BreadcrumbItem`	List item (li)
`BreadcrumbLink`	Navigate to parent page (a)
`BreadcrumbPage`	Current page (span)
`BreadcrumbSeparator`	Separator (chevron)
`BreadcrumbEllipsis`	Show more indicator

Props

Breadcrumb

Prop	Type	Default	Description
className	string	-	Additional CSS classes
...props	React.ComponentProps	-	Native nav props

BreadcrumbLink

Prop	Type	Default	Description
asChild	boolean	`false`	Render as child component
className	string	-	Additional CSS classes
...props	React.AnchorHTMLAttributes	-	Native anchor props

Breadcrumb

Breadcrumbs show users their current location within a website's hierarchy and provide navigation back to parent pages.

Preview

Usage

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbPage } from '@e-infra/design-system'

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Components

Component	Description
`Breadcrumb`	Container (nav element)
`BreadcrumbList`	List container (ol)
`BreadcrumbItem`	List item (li)
`BreadcrumbLink`	Navigate to parent page (a)
`BreadcrumbPage`	Current page (span)
`BreadcrumbSeparator`	Separator (chevron)
`BreadcrumbEllipsis`	Show more indicator

Props

Breadcrumb

Prop	Type	Default	Description
className	string	-	Additional CSS classes
...props	React.ComponentProps	-	Native nav props

BreadcrumbLink

Prop	Type	Default	Description
asChild	boolean	`false`	Render as child component
className	string	-	Additional CSS classes
...props	React.AnchorHTMLAttributes	-	Native anchor props