ComponentsEnterpriseSidePanel

SidePanel

SidePanel keeps contextual tasks and detail inspection beside the enterprise content they affect.

Overlay + inlineFocus trapFocus returnLogical placement3 widths

Overview

Use SidePanel for focused workflows or inspection that benefit from retaining visual context from the underlying workspace.

Edit project details

Live preview

Close and reopen the panel to inspect the contextual overlay behavior.

EditProjectPanel.tsx
tsx
import { Button, Input, SidePanel } from 'omverse-ui'
 
<Button ref={triggerRef} onClick={() => setOpen(true)}>Edit project</Button>
<SidePanel
open={open}
onOpenChange={setOpen}
title="Edit migration project"
description="Update ownership and delivery details."
returnFocusRef={triggerRef}
footer={<><Button variant="text">Cancel</Button><Button>Save changes</Button></>}
>
<Input label="Project name" />
<Input label="Owner" />
</SidePanel>

Anatomy

SidePanel combines a named header, dismissal and header actions, scrollable content, persistent footer, and placement edge.

Edit projectMigration program×
Owner

Maya Chen

Status

Active

CancelSave
12345
  1. 1
    Header

    Names the task or inspected object and adds concise context.

  2. 2
    Header actions

    Contains dismissal and optional contextual controls.

  3. 3
    Scrollable body

    Holds the primary form, details, or supporting workflow.

  4. 4
    Footer

    Keeps completion and cancellation actions persistently available.

  5. 5
    Placement edge

    Anchors the panel at the logical start or end of its context.

When to use

Use SidePanel when people need focused detail or editing while preserving awareness of the source workspace.

Recommended

  • Edit contextual details

    Use for record editing, assignment, filters, settings, and supporting workflows.

  • Inspect without navigating away

    Keep a table, board, or dashboard visible behind the task.

  • Provide persistent inspection

    Use inline mode for metadata or tools that remain beside the main workspace.

When not to use

Prefer other surfaces when the task needs full attention, little content, or simple confirmation.

Avoid

  • Do not use for critical confirmation

    Use Dialog for short decisions that must interrupt the workflow.

  • Do not compress complex pages

    Navigate to a full page when content requires broad layout or several sections.

  • Do not use as primary navigation

    Use Navbar or Sidebar for persistent destinations.

Variants

Mode, placement, and width adapt SidePanel to transient tasks and persistent enterprise inspectors.

Overlay

Creates a modal layer with backdrop, scroll lock, and focus containment.

Inline

Renders a persistent region within the application layout.

Start or end

Uses logical placement for left-to-right and right-to-left layouts.

Widths

Small, medium, and large balance context with task space.

States

SidePanel communicates visibility, progress, dismissal policy, and content overflow while preserving its structural regions.

StateTriggerVisual responseInteraction
ClosedPanel is inactivePanel and backdrop absentTrigger remains available
Open overlayContextual task startsBackdrop and edge panelFocus is trapped
Open inlineInspector is part of layoutContained side regionNormal page focus order
LoadingContent or save is updatingHeader progress indicatorContext remains visible
ScrollableBody exceeds available heightHeader and footer stay fixedOnly body scrolls
Non-dismissibleWorkflow requires explicit completionNo close actionBackdrop and Escape do not close

Behavior

Overlay mode owns focus containment, page scroll lock, dismissal, and return focus; inline mode participates in the normal layout.

Initial focus

Moves to a supplied target, the first control, or the panel container.

Focus trap

Tab and Shift+Tab wrap through overlay controls.

Focus return

Closing restores focus to the supplied trigger or previously active element.

Scroll ownership

Overlay locks the page while its body manages internal overflow.

Accessibility

Overlay SidePanel behaves as a named modal dialog; inline SidePanel is a named region in the page focus order.

KeyAction
TabMoves forward through panel controls and wraps in overlay mode.
ShiftTabMoves backward and wraps from the first control.
EscCloses a dismissible overlay when enabled.
EnterSpaceActivates focused native controls.
  • Use a concise title that identifies the task or object.
  • Link supporting description to the panel.
  • Move focus into modal overlays and trap it there.
  • Return focus to the opening trigger after dismissal.
  • Give close and icon-only actions accessible labels.
  • Keep the main body independently scrollable without hiding actions.

Content guidelines

Panel content should stay contextual, focused, and short enough to complete without becoming a page inside a page.

Name the task

Use a verb-object title for editing workflows.

ExampleEdit migration project

Preserve context

Use the description to identify the affected object.

ExampleMigration program

Use explicit actions

Name the outcome in the footer.

ExampleSave changes

Keep dismissal familiar

Use Cancel when changes can be discarded.

ExampleCancel

Examples

Inline mode supports persistent inspectors that do not need a backdrop, focus trap, or page scroll lock.

Contextual editing overlay

Live preview

The preview models a compact project editing workflow.

ProjectInspector.tsx
tsx
<SidePanel
mode="inline"
defaultOpen
size="sm"
title="Record details"
description="Persistent inspector"
>
<ProjectMetadata />
</SidePanel>

Props / API

SidePanel extends div attributes and composes application-owned content into header, scrollable body, and footer regions.

Props

PropTypeDefaultDescription
openbooleanundefinedControlled panel visibility.
defaultOpenbooleanfalseInitial uncontrolled visibility.
onOpenChange(open: boolean) => voidundefinedRuns whenever visibility changes.
titleReactNoderequiredPanel heading used for its accessible name.
descriptionReactNodeundefinedSupporting context linked to the panel.
childrenReactNodeundefinedMain scrollable panel content.
headerActionsReactNodeundefinedControls displayed beside the title.
footerReactNodeundefinedPersistent action region at the panel bottom.
closeLabelstring'Close panel'Accessible label for the close action.
dismissiblebooleantrueEnables close controls and dismissal gestures.
closeOnBackdropbooleantrueCloses an overlay from its backdrop.
closeOnEscapebooleantrueCloses an overlay when Escape is pressed.
loadingbooleanfalseShows an updating indicator in the header.
initialFocusRefRefObject<HTMLElement>first focusableElement focused when an overlay opens.
returnFocusRefRefObject<HTMLElement>triggerElement focused after an overlay closes.
mode'overlay' | 'inline''overlay'Chooses modal overlay or persistent inspector behavior.
placement'start' | 'end''end'Places the panel at the logical viewport edge.
size'sm' | 'md' | 'lg''md'Controls the maximum panel width.