# Split Panel [component-header:sl-split-panel] Split panels display two adjacent panels, allowing the user to reposition them. ```html preview
Start
End
``` ## Examples ### Initial Position To set the initial position in pixels, use the `position` attribute. If you need to set the initial value as a percentage, use the `setPositionAsPercentage()` method instead. If no position is provided, it will default to half of the available space. ```html preview
Start
End
``` ### Vertical Add the `vertical` attribute to render the split panel in a vertical orientation where the start and end panels are stacked. You also need to set a height when using the vertical orientation. ```html preview
Start
End
``` ### Snapping To snap panels at specific positions while dragging, add the `snap` attribute with one or more space-separated values. Values must be in pixels or percentages. For example, to snap the panel at `100px` and `50%`, use `snap="100px 50%"`. You can also customize how close the divider must be before snapping with the `snap-threshold` attribute. ```html preview
Start
End
``` ### Disabled Add the `disabled` attribute to prevent the split panel from being repositioned. ```html preview
Start
End
``` ### Setting the Primary Panel By default, both panels will grow or shrink proportionally when the host element is resized. If a primary panel is designated, it will maintain its size and the secondary panel will grow or shrink to fit the remaining space. You can set the primary panel to `start` or `end` using the `primary` attribute. Try resizing the example below with each option and notice how the panels respond. ```html preview
Start
End
None Start End
``` ### Min & Max To set a minimum or maximum size of the primary panel, use the `--min` and `--max` custom properties. Since the secondary panel is flexible, size restrictions can only be applied to the primary panel. This examples shows how you can make both panels be a minimum of 150px using `--min`, `--max`, and the `calc()` function. ```html preview
Start
End
``` ### Nested Split Panels Create complex layouts that can be repositioned independently by nesting split panels. ```html preview
Start
Top
Bottom
``` ### Customizing the Divider You can target the `divider` part to apply CSS properties to the divider. To add a handle, slot an icon or another element into the `handle` slot. When customizing the divider, make sure to think about focus styles for keyboard users. ```html preview
Start
End
``` Here's a more elaborate example that changes the divider's color and width and adds a styled handle. ```html preview
Start
End
``` [component-metadata:sl-split-panel]