@patternfly/react-core
Version:
This library provides a set of common React components for use with the PatternFly reference implementation.
47 lines (37 loc) • 1.12 kB
Markdown
---
id: Sidebar
cssPrefix: pf-v6-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"
```
### Border
```ts file="./SidebarBorder.tsx"
```
### Padding on panel
```ts file="./SidebarPaddingPanel.tsx"
```
### Padding on content
```ts file="./SidebarPaddingContent.tsx"
```