Sidepanel

Sidepanel, also known as a side panel or sidebar, is a user interface element that presents secondary content or controls adjacent to the main content area. It is typically located along the edge of a window or screen and can be docked, collapsed, or revealed on demand. Sidepanels are used to provide navigation, filters, details, settings, or tools without requiring users to leave the primary task.

In layout terms, a sidepanel is designed to complement the main view rather than replace it. Common patterns include a persistent docked panel, a collapsible panel that can be hidden, and a slide-over panel that overlays the main content. Responsive design often adapts sidepanels for smaller screens by reflowing them to the bottom or temporarily hiding them.

Interaction with sidepanels should be predictable and accessible. Good implementations support keyboard navigation, focus management, and appropriate ARIA labeling. When an overlay is used, the rest of the page should be obscured or inert to prevent interaction outside the panel.

Variants and related concepts include drawers, which typically slide from an edge and may behave as overlays, and sidebars, which are usually docked and always visible at larger sizes. Sidepanels are common in email clients, code and design tools, content management interfaces, and product catalogs to provide supplemental information or controls without cluttering the main content area.

See also: drawers, sidebars.