SplitView

SplitView defines how EnterUI handles a simple two-or-more pane layout for docs, settings, and product workspaces, including default structure, accessible states, and token-driven styling.

#Default usage

<SplitView>
  <SplitViewPane defaultSize="180px">
    <NavLink active href="/docs">Overview</NavLink>
    <NavLink href="/docs/components/button">Components</NavLink>
  </SplitViewPane>
  <SplitViewPane>
    <strong>Content pane</strong>
    <Text tone="muted">Use panes for persistent navigation plus focused content.</Text>
  </SplitViewPane>
</SplitView>

#Import

import { SplitView, SplitViewPane, Text } from "@froggdesign/enter-ui-react";

#Accessibility

SplitView is layout only. Use semantic landmarks inside panes when the layout represents navigation, main content, or complementary regions.

#API

• SplitView orientation: horizontal or vertical.
• SplitViewPane defaultSize sets the initial flex basis.
• SplitViewPane minSize sets the pane minimum size.

#Styling

Uses .eui-split-view and pane classes with subtle borders.