Breadcrumb
Navigation component showing the current page's location in the site hierarchy
Example
Breadcrumb
Navigation component showing the current page's location in the site hierarchy
Source: packages/appkit-ui/src/react/ui/breadcrumb.tsx
Props
This component extends standard HTML element attributes.
Usage
import { Breadcrumb } from '@databricks/appkit-ui';
<Breadcrumb /* props */ />
BreadcrumbEllipsis
Ellipsis indicator for collapsed breadcrumb items
Source: packages/appkit-ui/src/react/ui/breadcrumb.tsx
Props
This component extends standard HTML element attributes.
Usage
import { BreadcrumbEllipsis } from '@databricks/appkit-ui';
<BreadcrumbEllipsis /* props */ />
BreadcrumbItem
Individual item in the breadcrumb trail
Source: packages/appkit-ui/src/react/ui/breadcrumb.tsx
Props
This component extends standard HTML element attributes.
Usage
import { BreadcrumbItem } from '@databricks/appkit-ui';
<BreadcrumbItem /* props */ />
BreadcrumbLink
Clickable link within a breadcrumb item
Source: packages/appkit-ui/src/react/ui/breadcrumb.tsx
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
asChild | boolean | - | - |
Usage
import { BreadcrumbLink } from '@databricks/appkit-ui';
<BreadcrumbLink /* props */ />
BreadcrumbList
Ordered list container for breadcrumb items
Source: packages/appkit-ui/src/react/ui/breadcrumb.tsx
Props
This component extends standard HTML element attributes.
Usage
import { BreadcrumbList } from '@databricks/appkit-ui';
<BreadcrumbList /* props */ />
BreadcrumbPage
Current page indicator in the breadcrumb trail
Source: packages/appkit-ui/src/react/ui/breadcrumb.tsx
Props
This component extends standard HTML element attributes.
Usage
import { BreadcrumbPage } from '@databricks/appkit-ui';
<BreadcrumbPage /* props */ />
BreadcrumbSeparator
Visual separator between breadcrumb items
Source: packages/appkit-ui/src/react/ui/breadcrumb.tsx
Props
This component extends standard HTML element attributes.
Usage
import { BreadcrumbSeparator } from '@databricks/appkit-ui';
<BreadcrumbSeparator /* props */ />