تخطي إلى المحتوى

Menu · Patterns

Redirect menus: in-app paths, external docs (Zag.js, Phoenix LiveView), and per-item :href vs :navigate.

Redirect

    <.menu class="menu" redirect items={[
  %Corex.Tree.Item{value: "/ar/menu/anatomy", label: "Anatomy"},
      %Corex.Tree.Item{value: "/ar/menu/api", label: "API"}
]}>
  <:trigger>Navigate</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

Redirect external

    <.menu
  class="menu"
  redirect
  items={[
    %Corex.Tree.Item{value: "https://zagjs.com/components/react/menu", label: "Zag menu", new_tab: true},
    %Corex.Tree.Item{value: "https://hexdocs.pm/phoenix_live_view/", label: "Phoenix LiveView", new_tab: true}
  ]}
>
  <:trigger>External</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

Redirect types

    <.menu
  class="menu"
  redirect
  items={[
    %Corex.Tree.Item{value: "/ar/menu/playground", label: "href (default)", redirect: :href},
        %Corex.Tree.Item{value: "/ar/menu/events", label: "LiveView navigate", redirect: :navigate}
  ]}
>
  <:trigger>Redirect kinds</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>