# `PhoenixKitWeb.Components.Core.CrumbSwitcher`
[🔗](https://github.com/BeamLabEU/phoenix_kit/blob/v2.32.1/lib/phoenix_kit_web/components/core/crumb_switcher.ex#L1)

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.

# `crumb_switcher`

## 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.

---

*Consult [api-reference.md](api-reference.md) for complete listing*