Side Panel

Provides a collapsible panel for navigating through sections of an application. It’s designed to help users easily access key areas while maintaining focus on the main content.

Overview / Hero - KL

Anatomy

The Side Panel consists of three main parts: a fixed header at the top, the content area where information or actions are displayed, and an optional fixed footer at the bottom. The footer can include interactive elements like buttons or a text field, depending on the panel’s use case.

Side Panel anatomy

Side Panel anatomy

#

Element type

Element name

Element description

1

Header

Fixed Header

The top section that remains fixed and can contain titles or actions.

2

Content Area

Content

The main section where the content is displayed, such as text or forms.

3

Footer

Fixed Footer

The bottom section, fixed in place, which can contain interactive elements like buttons or a text field.