---
id: Sidebar
cssPrefix: pf-c-sidebar
section: components
propComponents: ['Sidebar', 'SidebarContent', 'SidebarPanel']
---

## Examples
### Basic
```ts file="./SidebarBasic.tsx"
```

### Stack
```ts file="./SidebarStack.tsx"
```

### Panel right with gutter
```ts file="./SidebarPanelRightGutter.tsx"
```

### Sticky panel
A `tabIndex` should be added to the `Sidebar` when there is scrollable content in order for the  overflow content to be accessible by keyboard.
```ts file="./SidebarStickyPanel.tsx"
```

### Static panel
A `tabIndex` should be added to the `Sidebar` when there is scrollable content in order for the  overflow content to be accessible by keyboard.
```ts file="./SidebarStaticPanel.tsx"
```

### Responsive panel width
A `tabIndex` should be added to the `Sidebar` when there is scrollable content in order for the  overflow content to be accessible by keyboard.
```ts file="./SidebarResponsivePanel.tsx"
```