A full height container with two children laid out horizontally. Typical uses involve placing a Sidebar on the left for primary navigation and then main content on the right. The right side might contain a separate Split component to provide further content depth. Typically, you will want the top Split to be a direct child of the App component as this will provide the best responsive behavior across devices.

Main content


fixed true|false
Whether each side should scroll independently.
flex both|left|right
Which side to give flexible space to. The default value is 'both'.
onResponsive {function (columns)}
Function that will be called when the display area changes. When space is limited the 'columns' parameter will be set to 'single'. Otherwise 'columns' will be set to 'multiple'.
priority left|right
Which side to prioritize when space is limited. The default value is 'right'.
separator true|false
Whether to include a separator between the children.
showOnResponsive priority|both
Whether the Split should show both sides for mobile, or collapse down to just the priority side. The default value is 'priority'