Examples
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.
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.
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.
Props
Sidebar
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | ||
| hasBorder | boolean | Adds a border between the panel and content. | |
| hasGutter | boolean | Adds space between the panel and content. | |
| hasNoBackground | boolean | Removes the background color. | |
| isPanelRight | boolean | false | Indicates that the panel is displayed to the right of the content when the oritentation is split. |
| orientation | 'stack' | 'split' | Indicates the direction of the layout. Default orientation is stack on small screens, and split on medium screens and above. |
SidebarContent
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | ||
| backgroundVariant | 'default' | 'secondary' | 'default' | Variant of the sidebar content background. |
| hasNoBackground | boolean | Removes the background color. | |
| hasPadding | boolean | Adds padding to the content. |
SidebarPanel
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | ||
| backgroundVariant | 'default' | 'secondary' | 'default' | Variant of the sidebar panel background. |
| hasNoBackground | boolean | Removes the background color. | |
| hasPadding | boolean | Adds padding to the panel. | |
| variant | 'default' | 'sticky' | 'static' | 'default' | Indicates whether the panel is positioned statically or sticky to the top. Default is sticky on small screens when the orientation is stack, and static on medium and above screens when the orientation is split. |
| width | { default?: 'default' | 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100'; sm?: 'default' | 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100'; md?: 'default' | 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100'; lg?: 'default' | 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100'; xl?: 'default' | 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100'; '2xl'?: 'default' | 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100'; } | Sets the panel width at various breakpoints. Default is 250px when the orientation is split. |
CSS variables
| Expand or collapse column | Selector | Variable | Value |
|---|
