import './Sidebar.css'

## Examples

### Basic


import Example1 from './Example1.html?raw'

<LiveExample html={Example1} />

### With secondary background


import Example2 from './Example2.html?raw'

<LiveExample html={Example2} />

### Gutter


import Example3 from './Example3.html?raw'

<LiveExample html={Example3} />

### Stack


import Example4 from './Example4.html?raw'

<LiveExample html={Example4} />

### Split


import Example5 from './Example5.html?raw'

<LiveExample html={Example5} />

### Panel right (HTML)


import Example6 from './Example6.html?raw'

<LiveExample html={Example6} />

### Panel right (modifier)


import Example7 from './Example7.html?raw'

<LiveExample html={Example7} />

### Sticky panel


import Example8 from './Example8.html?raw'

<LiveExample html={Example8} />

### Static panel


import Example9 from './Example9.html?raw'

<LiveExample html={Example9} />

### Responsive panel width


import Example10 from './Example10.html?raw'

<LiveExample html={Example10} />

### Border


import Example11 from './Example11.html?raw'

<LiveExample html={Example11} />

### Padding on panel


import Example12 from './Example12.html?raw'

<LiveExample html={Example12} />

### Padding on content


import Example13 from './Example13.html?raw'

<LiveExample html={Example13} />

## 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](/tokens/all-patternfly-tokens). **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. |