PhoenixKitWeb.Components.Core.CrumbSwitcher (phoenix_kit v2.32.1)

Copy Markdown View Source

A ▾ beside a breadcrumb segment that opens a searchable list of the other things on that level — GitHub's repository switcher, for any trail: the other catalogues beside this one, the categories beside this category.

The admin header renders it for you: give a page_crumbs entry a :switcher, or the page title a page_title_switcher. Use the component directly only for a trail you draw yourself.

The switcher map

%{
  title: "Switch catalogue",               # heading + the button's label
  search_placeholder: "Find a catalogue…", # optional, defaults to "Search..."
  items: [
    %{label: "Kitchen", navigate: "/…", current: true},
    %{label: "Bathroom", navigate: "/…"},
    %{label: "Doors", patch: "/…"}          # same-LiveView move
  ]
}

Each item is a real link — navigate (another LiveView) or patch (the same one) — so middle-click and copy-link keep working. current: true ticks it. The list filters as you type, on the client (case and accents ignored), and Enter opens the first match.

Open and close are client-side (PopoverPanel): instant, Escape and a click away close it, and on a phone it becomes a full-screen sheet. The CrumbSwitcher hook keeps the rest honest whichever way it opened or closed: the search starts empty and takes focus on open, focus returns to the ▾ on close, and the ▾'s aria-expanded follows the panel. Tab stays inside the open panel.

Summary

Functions

crumb_switcher(assigns)

Attributes

  • id (:string) (required) - DOM id of the panel; must be unique on the page.
  • switcher (:map) (required) - %{title:, items:, search_placeholder:}, see the moduledoc.