SidePanel

Beta

SidePanels are vertical containers used to display additional information that supports the main content area or to edit specific content within the page.

install	yarn add @clayui/core
version
use	import {SidePanel} from '@clayui/core';

Example

import {SidePanel, Provider} from '@clayui/core';
import Button from '@clayui/button';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	const [open, setOpen] = React.useState(false);

	const ref = React.useRef();

	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4" ref={ref} style={{minHeight: '100vh'}}>
				<Button
					aria-controls="sidepanel-example"
					aria-pressed={open}
					onClick={() => setOpen(!open)}
				>
					Open
				</Button>

				<SidePanel
					containerRef={ref}
					id="sidepanel-example"
					onOpenChange={setOpen}
					open={open}
				>
					<SidePanel.Header>
						<SidePanel.Title>Title</SidePanel.Title>
					</SidePanel.Header>
					<SidePanel.Body>Body</SidePanel.Body>
					<SidePanel.Footer>
						<Button.Group spaced>
							<Button>Primary</Button>
							<Button displayType="secondary">Secondary</Button>
						</Button.Group>
					</SidePanel.Footer>
				</SidePanel>
			</div>
		</Provider>
	);
}

Introduction

The SidePanel component provides a more easy and quick way for the users to consult or edit information without the need for deeper navigation.

SidePanels can anchor to the left or right side of the screen. They can be collapsible or triggered by a button or a link. When activated, the SidePanel opens and the content of the page is readjusted. You can navigate through the SidePanel content using both mouse and keyboard.

Anatomy

<SidePanel>
	<SidePanel.Header>
		<SidePanel.Title />
	</SidePanel.Header>
	<SidePanel.Body />
	<SidePanel.Footer />
</SidePanel>;

Content

The SidePanel component follows a compositional API with subcomponents: Header, Title, Body, and Footer. Refer to the design specifications to configure each part according to your use case.

Header

he <SidePanel.Header /> subcomponent always renders the close button by default but leaves the left side of the header open for developer customization.

The <SidePanel.Title /> must always be used as a direct child of Header. It automatically configures accessibility attributes—such as setting the appropriate aria-labelledby relationship between the title and the panel.

<SidePanel.Header>
	<SidePanel.Title>Title</SidePanel.Title>
</SidePanel.Header>

Body and Footer

The <SidePanel.Body /> and <SidePanel.Footer /> components are flexible containers that can render any content. However, you should follow design system guidelines and recommendations to ensure consistent layout and behavior across the application.

Open panel

The SidePanel component requires the open state to be controlled, even though it defaults to an uncontrolled behavior.

Opening the SidePanel can be triggered from any button or link in the DOM, so it’s your responsibility to ensure the trigger element meets accessibility standards. This includes adding appropriate attributes such as aria-controls and aria-pressed to the button:

import {SidePanel} from '@clayui/core';
import Button from '@clayui/button';

export default function App() {
	const [open, setOpen] = useState(false);

	const ref = useRef();

	return (
		<>
			<Button
				aria-controls="sidepanel-example"
				aria-pressed={open}
				onClick={() => setOpen(!open)}
			>
				Open
			</Button>

			<div ref={ref}>
				<SidePanel
					containerRef={ref}
					id="sidepanel-example"
					onOpenChange={setOpen}
					open={open}
				/>
			</div>
		</>
	);
}

Make sure the id used in aria-controls matches the id of the <SidePanel /> component to maintain a proper relationship between the trigger and the panel.

Direction

The SidePanel can be displayed on the right or left side by setting the direction property.

<SidePanel direction="left" />

Position

The SidePanel is designed to use either absolute or fixed positioning.

absolute positioning is the default which allows the SidePanel to be used in more flexible contexts If the SidePanel cannot be placed at the edge of the window then absolute positioning should be used. When the SidePanel is positioned absolutely the header and footer may be scrolled out of view on longer pages.

fixed positioning should only be used when the SidePanel can be placed at a horizontal edge of the window without any elements above it that are not also using fixed or sticky positioning. With fixed positioning the header and footer will also be fixed and the SidePanel body will have it’s own independent scroll.

<SidePanel position="fixed" />