Side panel¶

Usage¶

The side panel is used to display additional content or functionality that is related to the main content of a page.

The panel takes the full application height and a fixed width. There are three pre-defined widths available: regular (390px), wide (500px), and extended (responsive).

The extended variant adapts its width based on application breakpoints, providing more horizontal space on larger viewports while maintaining the same behavior and interaction model as other side panels.

When to use¶

• Use it to show detail information of a selected item/object from the main working area (e.g. of a list).
• Use it for navigation items such as links or menus.
• Use it for filter options to enable users to refine their search results.
• Use it for settings and preferences to allow users to customize their experience.
• Use it for help and support information.
• Use it for notifications to alert users about important updates, events or more.

Best practices¶

• Don't use it for permanent information. The content should be changing based on the context.
• The content should be scrollable if it exceeds the height of the application window.

Design¶

1. Title: A descriptive title for the panel based on its content.
2. Section header (optional): Use it for breaking the panel into multiple distinct sections.
3. Content body: A container that allows to implement any kind of different content.
4. Exit icon: Button used to hide or collapse the side panel.

Content¶

The side panel can contain any content based on the use case. It is common to use it with accordions and tabs to section information without overwhelming users.

A special variation of the side panel allows for icons to represent the status of the selection, remaining visible even in the collapsed state. This is commonly used to represent data point states including event states, but is not restricted to these cases.

Modes¶

The side panel can be either closeable (the panel is completely hidden) or collapsible (still visible with summary information) according to the application/project use-case.

• Use a closeable side panel if the content has no direct relation to the items within the main content area. Closeable side panels are typically opened by selecting an entry within the horizontal navigation.
• Use a collapsible side panel if the content changes based on the selection made within the main content area.

A side panel can be configured to use either over-mode or scroll-mode. In over-mode, the panel overlaps the main content area, while in scroll-mode, the panel pushes the main content area away.

Extended side panel¶

The extended side panel can be used as a responsive container when additional space is required beyond standard panel widths.

The extended side panel can remain alongside the main content, overlay it, or be used to navigate to a dedicated page.

Collapsible floating button¶

This is a variation of the collapsed state, specifically designed for smaller screens.

The floating button is restricted to the following configurations:

• The side panel by itself
• The side panel + application header

It should never be used in combination with the responsive behavior of the vertical navigation.

If data point states are available (out of service, event active, etc), a notification tag can be enabled to signal to the user that something requires attention.

Code¶

Use it together with <si-accordion> and <si-collapsible-panel> as shown in the example. If the accordion behavior of having only one open panel is not desired, simply use <si-collapsible-panel> without wrapping them in an <si-accordion>.

Usage¶

Within a module

import { SiSidePanelModule } from '@siemens/element-ng/side-panel';
import { SiAccordionModule } from '@siemens/element-ng/accordion';

@NgModule({
  imports: [SiAccordionModule, SiSidePanelModule, ...]
})

or as a standalone component

import { SiSidePanelComponent, SiSidePanelContentComponent } from '@siemens/element-ng/side-panel';
import { SiAccordionComponent, SiCollapsiblePanelComponent } from '@siemens/element-ng/accordion';

@Component({
  imports: [
    SiSidePanelComponent,
    SiSidePanelContentComponent
    SiAccordionComponent,
    SiCollapsiblePanelComponent,
  ]
})

All content that should be shown in the side panel needs to be wrapped in a <si-side-panel-content>.

The standard way to provide content for the side panel is by placing the <si-side-panel-content> element directly inside the <si-side-panel>:

Side panel with inner navigation¶

Use the siSidePanelBackButton directive to navigate from a detail view back to the previous view within the side panel:

Flexible content injection via cdkPortal and SiSidePanelService¶

A more flexible way is to use the cdkPortal directive from the Angular CDK Portal combined with the SiSidePanelService which allows to control the content of the side panel from anywhere within the application:

Collapsible side panel with various options¶

The side panel supports a mode where it collapses into a vertical bar instead of getting completely hidden. This mode can be enabled by setting [collapsible]="true" as demonstrated in the example below. There are also many other options that can be enabled on the <si-side-panel-content> like showing a search box, content actions, or status indicators.

SiSidePanelComponent API Documentation¶

Input Properties¶

Output Properties¶

Attributes and Methods¶

SiSidePanelContentComponent API Documentation¶

Input Properties¶

Name	Type	Default	Description
closeButtonLabel ¶	TranslatableString	$localize`:@@SI_SIDE_PANEL.CLOSE:Close`	Aria label for close button. Needed for a11y
displayMode ¶	SidePanelDisplayMode		Display mode for side panel - enables navigate or overlay functionality
enterFullscreenLabel ¶	TranslatableString	$localize`:@@SI_SIDE_PANEL.ENTER_FULLSCREEN:Full screen`	Enter fullscreen aria-label, required for a11y
exitFullscreenLabel ¶	TranslatableString	$localize`:@@SI_SIDE_PANEL.EXIT_FULLSCREEN:Exit full screen`	Exit fullscreen aria-label, required for a11y
heading ¶	TranslatableString	''	Header of side panel
navigateConfig ¶	SidePanelNavigateConfig		Configuration for navigate mode
primaryActions ¶	(MenuItem | ContentActionBarMainItem)[]	[]	Input list of primary action items
searchable ¶	boolean	false	Toggles search bar
searchPlaceholder ¶	TranslatableString	$localize`:@@SI_SIDE_PANEL.SEARCH_PLACEHOLDER:Search…`	Placeholder text for search
secondaryActions ¶	(MenuItem | MenuItem)[]	[]	Input list of secondary action items.
showMobileDrawerBadge ¶	boolean	false	Show a badge on the mobile drawer indicating a new alert or notification
toggleItemLabel ¶	TranslatableString	$localize`:@@SI_SIDE_PANEL.TOGGLE:Toggle`	Toggle icon aria-label, required for a11y
collapsible ¶	boolean	undefined	Deprecated: This input is no longer used. The collapsible state is managed by the SiSidePanelService. This input will be removed in a future major version.
statusActions ¶	StatusItem[]	[]	Status icons/actions Deprecated: Use the SiSidePanelActionsComponent instead: <​si-side-panel-content​> <​si-side-panel-actions​> <​button type="button" si-side-panel-action icon="element-alarm-background-filled" iconColor="status-danger" stackedIcon="element-alarm-tick" stackedIconColor="text-primary" (click)="action()" ​> Action <​/button​> <​/si-side-panel-actions​> <​/si-side-panel-content​>

Output Properties¶

Attributes and Methods¶

SiSidePanelService API Documentation¶

Attributes and Methods¶

Types Documentation¶

<si-side-panel-content>
  <si-side-panel-actions>
      <button
        type="button"
        si-side-panel-action
        icon="element-alarm-background-filled"
        iconColor="status-danger"
        stackedIcon="element-alarm-tick"
        stackedIconColor="text-primary"
        (click)="action()"
      >
        Action
      </button>
  </si-side-panel-actions>
</si-side-panel-content>

<si-side-panel-content>
  <si-side-panel-actions>
      <button
        type="button"
        si-side-panel-action
        icon="element-alarm-background-filled"
        iconColor="status-danger"
        stackedIcon="element-alarm-tick"
        stackedIconColor="text-primary"
        (click)="action()"
      >
        Action
      </button>
  </si-side-panel-actions>
</si-side-panel-content>