SidePanel

SidePanel in Storybook

Examples

Check out the Usage section for details about how to design a SidePanel properly, and the different configuration options we provide.

Basic example

A SidePanel component is a wrapper that will designate which components make up a panel on the left side of the window. A button can be rendered in the SidePanel to collapse or expand the panel. In this example, the React useState hook is used to manage the collapsed state of the SidePanel.

const [collapsed, setCollapsed] = useState<boolean>(false);

<SidePanel collapsed={collapsed} onCollapsedChange={setCollapsed}>
    <p>Sample side panel text</p>
</SidePanel>

Usage

Overview

The side panel organizes content structure and provides context to orient users. It serves as secondary navigation, offering access to tools, settings, or additional sections. Positioned on the left side of the screen, it spans vertically from the header to the bottom of the page and pushes the content rather than overlaying it.

When to use

• The application has multiple sections that users need to switch between frequently.
• Users need a consistent menu that remains visible across pages.
• A hierarchical structure is required, with sections and subsections.
• The navigation should be accessible with minimal clicks.
• You want to allow users to collapse the navigation to save space while keeping it available.

Anatomy

1. Panel container: The main structure that contains all components of the side panel.
2. Item list: A list of selectable items.
3. Collapsible icon button: An arrow button that indicates whether the panel can be collapsed or expanded. Clicking it toggles the side panel state.

Not all elements are required. Only include what is necessary for your specific use case. The side panel is an open and flexible panel that can accommodate various elements based on specific use cases. Teams can customize it by adding different components and functionalities as needed while maintaining a streamlined experience.

Behavior

• Appears on the left side of the screen and spans from the header to the bottom of the page.
• Can be collapsible or persistent, depending on the application’s needs.
• Pushes the content rather than overlaying it, ensuring a clear and structured layout.
• Provides quick access to secondary navigation, tools, or contextual actions without disrupting the main workflow.

Usage examples

Examples of side panel usage, showcasing its open and flexible nature.

Side panel with a steps layout progress indicator

Side panel with a tree view component

Related elements

• Header
• Subheader
• Tools side panel
• Footer

Code

const [collapsed, setCollapsed] = useState<boolean>(false);

<SidePanel collapsed={collapsed} onCollapsedChange={setCollapsed}>
    <p>Sample side panel text</p>
</SidePanel>

Import statement

import { SidePanel } from '@jutro/components';

Component contract

Make sure to understand the Design System components API surface, and the implications and trade-offs. Learn more in our introduction to the component API.

Properties

childrenrequired

Type

node

Description

Content of the SidePanel.

className

Type

string

Description

CSS class name for this component.

collapsed

Type

boolean

Description

If true, SidePanel is collapsed.

hideCollapseButton

Type

boolean

Description

If true, the collapse button is not rendered.

onCollapsedChange

Type

(collapsed: boolean) => void

Description

A callback invoked when the collapse button is clicked.

Hooks

No hooks are available for SidePanel.

Translation keys

There are two translation keys associated with the SidePanel component:

Key	Used for
jutro-components.layout.SidePanel.collapseButton	aria-label value when button would collapse the SidePanel
jutro-components.layout.SidePanel.expandButton	aria-label value when button would expand the SidePanel

Escape hatches

For more information, see our documentation about escape hatches.

Changelog

10.10.0

SidePanel component added.