# `PhiaUi.Components.Layout.SplitLayout`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/layout/split_layout.ex#L1)

Two-column layout: a fixed-width pane alongside flexible main content.

Simpler than `page_layout` — no header/footer slots, just a pane and main
content area. Ideal for list-detail, settings panels, and inspector UIs.

When `collapsible` is enabled (default), the pane is hidden below the `md`
breakpoint and the layout stacks vertically on small screens.

## Examples

    <%!-- List-detail pattern --%>
    <.split_layout>
      <:pane>
        <ul>
          <%= for item <- @items do %>
            <li phx-click="select" phx-value-id={item.id}>{item.name}</li>
          <% end %>
        </ul>
      </:pane>
      <div class="p-6">
        <%= if @selected do %>
          <h1>{@selected.name}</h1>
        <% end %>
      </div>
    </.split_layout>

    <%!-- Right pane inspector --%>
    <.split_layout pane_position={:end} pane_width={:md}>
      <:pane><aside class="p-4">Properties</aside></:pane>
      <div class="p-6">Canvas area</div>
    </.split_layout>

    <%!-- Non-collapsible: pane always visible --%>
    <.split_layout collapsible={false}>
      <:pane><nav>Always visible nav</nav></:pane>
      <div>Content</div>
    </.split_layout>

# `split_layout`

Renders a two-column split layout.
## Attributes

* `pane_position` (`:atom`) - Pane position: `:start` (left) or `:end` (right). Defaults to `:start`. Must be one of `:start`, or `:end`.
* `pane_width` (`:atom`) - Fixed width of the pane. Defaults to `:sm`. Must be one of `:xs`, `:sm`, `:md`, or `:lg`.
* `collapsible` (`:boolean`) - When true, hides the pane below the `md` breakpoint and stacks vertically. Defaults to `true`.
* `class` (`:string`) - Additional CSS classes merged via cn/1. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root element.
## Slots

* `pane` (required) - Fixed-width secondary panel.
* `inner_block` (required) - Flexible main content area.

---

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