import Props from '@ionic-internal/component-api/v8/split-pane/props.md'; import Events from '@ionic-internal/component-api/v8/split-pane/events.md'; import Methods from '@ionic-internal/component-api/v8/split-pane/methods.md'; import Parts from '@ionic-internal/component-api/v8/split-pane/parts.md'; import CustomProps from '@ionic-internal/component-api/v8/split-pane/custom-props.mdx'; import Slots from '@ionic-internal/component-api/v8/split-pane/slots.md';

import EncapsulationPill from '@components/page/api/EncapsulationPill';

A split pane is useful when creating multi-view layouts. It allows UI elements, like menus, to be displayed as the viewport width increases.

If the device's screen width is below a certain size, the split pane will collapse and the menu will be hidden. This is ideal for creating an app that will be served in a browser and deployed through the app store to phones and tablets.

:::note This demo sets the when property to 'xs' so the split pane always shows up. Your Ionic application does not need this if you want the split pane to collapse on smaller viewports. See Setting Breakpoints for more information. :::

import Basic from '@site/static/usage/v8/split-pane/basic/index.md';

By default, the split pane will expand when the screen is larger than 992px. To customize this, pass a breakpoint in the when property. The when property can accept a boolean value, any valid media query, or one of Ionic's predefined sizes.

<!-- can be "xs", "sm", "md", "lg", or "xl" -->
<ion-split-pane when="md"></ion-split-pane>

<!-- can be any valid media query https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries -->
<ion-split-pane when="(min-width: 40px)"></ion-split-pane>

import CSSProperties from '@site/static/usage/v8/split-pane/theming/css-properties/index.md';