# Tabbed interface with multiple LiveViews?

**URL:** <https://forum.elixirforum.com/t/tabbed-interface-with-multiple-liveviews/31670>\
**Category:** Questions\
**Tags:** phoenix, liveview\
**Created:** [May 20, 2020, 6:35pm UTC](https://forum.elixirforum.com/t/tabbed-interface-with-multiple-liveviews/31670 "2020-05-20T18:35:38Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![henrik](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/henrik/32/4340_2.png) [@henrik](https://forum.elixirforum.com/u/henrik)\
**Post date:** [May 21, 2020, 8:12am UTC](https://forum.elixirforum.com/t/tabbed-interface-with-multiple-liveviews/31670/4 "2020-05-21T08:12:54Z")

</div>

Started experimenting with this.

I’m realising that turning my LiveViews into components makes them a little more work, because I’ll have to pass their state in from the parent TabsLive, have to explicitly tell them to pass events to @myself, and they don’t have a handle\_info.

But I guess that’s the trade-off – if I want to switch between multiple live thingies without re-mounting them, I assume they need to be components within a parent LiveView. I guess there’s no way to switch between two different LiveViews without unmounting/remounting, other than if I render both on a non-live page and hide/show them?

Just to check that I’ve understood the idea correctly (and if it helps someone else who finds their way here), this is what I’ve got so far.

Routes:

```elixir
live "/one", TabsLive, :one
live "/two", TabsLive, :two

```

With this navigation in the live layout:

```elixir
<%= live_patch("One", to: Routes.tabs_path(@socket, :one)) %>
<%= live_patch("Two", to: Routes.tabs_path(@socket, :two)) %>

```

And this in TabsLive:

```elixir
defmodule MyWeb.TabsLive do
  use MyWeb, :live_view

  def render(assigns) do
    ~L"""
    Hello: <%= @live_action %>

    <%= case @live_action do %>
    <% :one -> %>
      <%= live_component @socket, MyWeb.OneComponent, id: :one %>
    <% :two -> %>
      <%= live_component @socket, MyWeb.TwoComponent, id: :two %>
    <% end %>
    """
  end

  @impl true
  def mount(_params, _session, socket) do
    {:ok, socket}
  end

  # Needs to be defined for re-rendering to happen.
  def handle_params(_params, _uri, socket) do
    {:noreply, socket}
  end
end

```

---

_[View the full topic](https://forum.elixirforum.com/t/tabbed-interface-with-multiple-liveviews/31670)._