1. Kikita UI
  2. Components
  3. Surfaces
  4. Breadcrumbs
  5. Playground
Skip to content
Kikita UI
  • Installation
  • Theming
  • Tokens
  • Typography
  • Density
  • Accessibility
  • AI Support
  • Package Smoke
  • Button
  • Icon Button
  • Menu
  • Command Palette
  • Field
  • Input
  • Color Input
  • Select
  • Combobox
  • Date Picker
  • Calendar
  • File Upload
  • Segmented
  • Slider
  • Number Input
  • Textarea
  • Checkbox
  • Switch
  • Radio
  • Group
  • Badge
  • Loader
  • Skeleton
  • Tooltip
  • Toast
  • Empty State
  • Progress
  • Card
  • Tabs
  • Accordion
  • Breadcrumbs
  • Popover
  • Dialog
  • Drawer
  • Dropdown
  • Separator
  • Stepper
  • Icon
  • Avatar
  • Table
  • Chip
  • Scrollbar
  • Tree

Breadcrumbs — Playground

px
  1. Components
  2. Surfaces
  3. Breadcrumbs
size
html.html
<nav aria-label="Breadcrumb">
  <ol kuiBreadcrumbs>
    <li><a kuiBreadcrumbItem href="/components">Components</a></li>
    <li kuiBreadcrumbSeparator></li>
    <li><span kuiBreadcrumbItem>Surfaces</span></li>
    <li kuiBreadcrumbSeparator></li>
    <li><span kuiBreadcrumbItem current>Breadcrumbs</span></li>
  </ol>
</nav>
NameTypeDefaultDescription
ol[kuiBreadcrumbs].size'sm' | 'md' | 'lg''md'Font size, separator scale, and spacing for the full trail.
a[kuiBreadcrumbItem]directive-Native link crumb for navigable hierarchy levels.
span[kuiBreadcrumbItem]directive-Plain-text crumb for grouping labels or the current page.
span[kuiBreadcrumbItem].currentbooleanfalseMarks the final crumb as the current page and sets aria-current.
li[kuiBreadcrumbSeparator]component-Decorative separator list item hidden from assistive technology.

Inputs verified against @kikita-labs/ui v1.6.1 public typings.