- React
- HTML

import ’./Sidebar.css’

## Examples

### Basic

### With secondary background

### Gutter

### Stack

### Split

### Panel right (HTML)

### Panel right (modifier)

### Sticky panel

### Static panel

### Responsive panel width

### Border

### Padding on panel

### Padding on content

## Documentation

### Usage

Class | Applied to | Outcome
--- | --- | ---
`.pf-v6-c-sidebar` | `<div>` | Initiates the sidebar component. Required
`.pf-v6-c-sidebar__main` | `<div>` | Initiates the sidebar main element. Required
`.pf-v6-c-sidebar__panel` | `<div>` | Initiates the sidebar panel element. Required
`.pf-v6-c-sidebar__content` | `<div>` | Initiates the sidebar content element. Required
`.pf-m-border` | `.pf-v6-c-sidebar__main` | Modifies the sidebar component to add a border between the panel and content.
`.pf-m-padding` | `.pf-v6-c-sidebar__panel`, `.pf-v6-c-sidebar__content` | Modifies the sidebar component to add a padding to panel and/or content.
`.pf-m-gutter` | `.pf-v6-c-sidebar` | Modifies the sidebar component to add a gutter between the panel and content.
`.pf-m-stack` | `.pf-v6-c-sidebar` | Modifies the sidebar to stack the panel on top of the content.
`.pf-m-split` | `.pf-v6-c-sidebar` | Modifies the sidebar to position the panel and content side by side.
`.pf-m-panel-right` | `.pf-v6-c-sidebar` | Modifies the sidebar to place the panel to the right of the content.
`.pf-m-sticky` | `.pf-v6-c-sidebar__panel` | Modifies the panel to be sticky to the top of the layout.
`.pf-m-static` | `.pf-v6-c-sidebar__panel` | Modifies the panel to be positioned statically.
`.pf-m-width-{default, 25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-v6-c-sidebar__panel` | Modifies the panel width at optional breakpoint. Note: does not apply when the panel is stacked on top of the content.
`.pf-m-no-background` | `.pf-v6-c-sidebar`, `.pf-v6-c-sidebar__panel, .pf-v6-c-sidebar__content` | Modifies the element to have a transparent background.
`.pf-m-secondary` | `.pf-v6-c-sidebar__panel, .pf-v6-c-sidebar__content` | Modifies the element to have secondary styling.

##
CSS variables