Mixins / foldkit-mixins-ui

Breadcrumb

namespace · packages/mixins-ui/src/breadcrumb.ts:1

export * as Breadcrumb from './breadcrumb.js'

In the guides

Members

const · packages/mixins-ui/src/breadcrumb.ts:10

const BreadcrumbSlots: Slots.Contract<{
  readonly root: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
  readonly list: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
  readonly item: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
  readonly link: Slot.UnnamedSlot<
    Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
  readonly current: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
}>

A breadcrumb trail publishes its regions as slots; it owns no state, messages, or bundles. The trail is a navigation landmark with an ordered list; the current page is text, not a link, marked aria-current.

interface · packages/mixins-ui/src/breadcrumb.ts:19

interface BreadcrumbStep {
  readonly label: string
  readonly href?: string | undefined
  readonly current?: boolean | undefined
}

One step: a link anywhere but here, plain text for where we are.

interface · packages/mixins-ui/src/breadcrumb.ts:30

interface BreadcrumbView<Message = never> {
  readonly steps: ReadonlyArray<BreadcrumbStep>
  readonly style?: NamedStyle<typeof BreadcrumbSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

A breadcrumb trail in one call: the steps from the site root to here, a style for its slots, and mixins beside the style. No upstream component stands behind it.

Breadcrumb.view

function · packages/mixins-ui/src/breadcrumb.ts:38

function view<Message = never>(
  options: BreadcrumbView<Message>,
  h: HtmlBuilder<Message>,
): Html