# Sidebar

*Category:* Components
*Section:* Application
*Source:* https://uikit.developers.rio.cloud/#/components/sidebar
*Captured:* 2026-04-27T14:57:09.895Z

There are 2 kinds of Sidebars. The default fluid and the fly variant.

## Sidebar

Sidebars have to be wrapped in ApplicationLayout.Sidebar and for floating reasons they have to be placed before ApplicationLayout.Body.

You can add the class right to the ApplicationLayout.Sidebar to have the sidebars rendered on the right side of the screen.

For more information about the ApplicationLayout see here

### Example: Example 1

Left sidebars
Resizable fly Sidebar: Toggle Sidebar

Right sidebars
Resizable fluid Sidebar with resize limits and custom header button: Toggle Sidebar
Fly Sidebar which overlays content: Toggle Sidebar
Fly Sidebar with custom width and visible backdrop: Toggle Sidebar
Sidebar which switches mode automatically on defined breakpoint between fly and fluid: Toggle Sidebar

#### React (tsx)

```tsx
import type React from 'react';
import { useRef, useState } from 'react';
import { noop } from 'es-toolkit/compat';

import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';
import Sidebar from '@rio-cloud/rio-uikit/Sidebar';
import Notification from '@rio-cloud/rio-uikit/Notification';
import SimpleTooltip from '@rio-cloud/rio-uikit/SimpleTooltip';
import Button from '@rio-cloud/rio-uikit/Button';
import { dummyTextShort, dummyText, dummyTextLong, dummyTextExtraLong } from '../../../utils/data';
import { SidebarDialogExample } from './SidebarDialogExample';

export type SidebarDemoKey =
    | 'showSidebarLeft1'
    | 'showSidebarLeft2'
    | 'showSidebarRight1'
    | 'showSidebarRight2'
    | 'showSidebarRight3'
    | 'showSidebarRight4';

export type SidebarDemosProps = Partial<Record<SidebarDemoKey, boolean>> & {
    toggleSidebar?: (id: SidebarDemoKey) => void;
};

const SidebarDemos = (props: SidebarDemosProps) => {
    const {
        toggleSidebar = noop,
        showSidebarLeft1,
        showSidebarRight1,
        showSidebarRight2,
        showSidebarRight3,
        showSidebarRight4,
    } = props;

    const bodyRef = useRef<HTMLDivElement>(null);

    return (
        <>
            <ApplicationLayout.Sidebar>
                <Sidebar
                    headerClassName='test'
                    showHeaderBorder
                    title='Sidebar Left'
                    titleClassName='padding-left-10'
                    closed={!showSidebarLeft1}
                    onClose={() => toggleSidebar('showSidebarLeft1')}
                    footer={
                        <Button bsStyle={Button.PRIMARY} onClick={() => console.log('hello, world')}>
                            Button
                        </Button>
                    }
                    resizable
                    onResizeEnd={() => console.log(bodyRef.current?.scrollWidth)}
                    minWidth={120}
                    maxWidth={600}
                    bodyRef={bodyRef}
                    position={Sidebar.LEFT}
                    fly
                >
                    <div className='padding-left-20 padding-top-20 padding-right-20'>{dummyTextExtraLong}</div>
                </Sidebar>
            </ApplicationLayout.Sidebar>

            <ApplicationLayout.Sidebar className='right'>
                <Sidebar
                    title='Sidebar Right'
                    titleClassName='padding-left-10'
                    closed={!showSidebarRight1}
                    onClose={() => toggleSidebar('showSidebarRight1')}
                    footer={<Button bsStyle={Button.PRIMARY}>Button</Button>}
                    resizable
                    enableFullscreenToggle
                    fullscreenToggleTooltip='Fullscreen'
                    position={Sidebar.RIGHT}
                    minWidth={120}
                    maxWidth={600}
                    headerButtons={
                        <>
                            <SimpleTooltip placement='bottom' content='Download'>
                                <Button bsStyle={Button.MUTED} iconName='rioglyph-download' iconOnly />
                            </SimpleTooltip>
                            <SimpleTooltip placement='bottom' content='Previous Item'>
                                <Button bsStyle={Button.MUTED} iconName='rioglyph-chevron-left' iconOnly />
                            </SimpleTooltip>
                            <SimpleTooltip placement='bottom' content='Next Item'>
                                <Button bsStyle={Button.MUTED} iconName='rioglyph-chevron-right' iconOnly />
                            </SimpleTooltip>
                        </>
                    }
                >
                    <div className='padding-left-20 padding-right-20'>
                        <DummySidebarTable />
                    </div>
                </Sidebar>

                <Sidebar
                    fly
                    title='Sidebar Right'
                    titleClassName='padding-left-10'
                    closed={!showSidebarRight2}
                    onClose={() => toggleSidebar('showSidebarRight2')}
                    footer={<Button bsStyle={Button.PRIMARY}>Button</Button>}
                >
                    <div className='padding-left-20 padding-right-20'>
                        <DummySidebarTable />
                    </div>
                </Sidebar>

                <Sidebar
                    fly
                    hasBackdrop
                    makeBackdropVisible
                    onBackdropClick={() => Notification.info('Sidebar backdrop clicked')}
                    title='Sidebar Right with backdrop'
                    titleClassName='padding-left-10'
                    closed={!showSidebarRight3}
                    onClose={() => toggleSidebar('showSidebarRight3')}
                    position={Sidebar.RIGHT}
                    width={600}
                    footer={
                        <Button bsStyle={Button.PRIMARY} onClick={() => toggleSidebar('showSidebarRight3')}>
                            Close
                        </Button>
                    }
                >
                    <div className='padding-left-20 padding-right-20'>
                        <CustomContentExample />
                    </div>
                </Sidebar>

                <Sidebar
                    title='Sidebar Left with dynamic mode'
                    titleClassName='padding-left-10'
                    closed={!showSidebarRight4}
                    onClose={() => toggleSidebar('showSidebarLeft2')}
                    position={Sidebar.RIGHT}
                    footer={<Button bsStyle={Button.PRIMARY}>Button</Button>}
                    switchModeBreakpoint={1100}
                >
                    <div className='padding-left-20 padding-right-20'>{dummyTextExtraLong}</div>
                </Sidebar>
            </ApplicationLayout.Sidebar>
        </>
    );
};

export const DummySidebarTable = () => (
    <table className='table table-condensed'>
        <thead>
            <tr>
                <th className='padding-left-0 width-50pct'>Key</th>
                <th className='width-50pct'>Value</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td className='padding-left-0 text-color-dark'>Key</td>
                <td>Value</td>
            </tr>
            <tr>
                <td className='padding-left-0 text-color-dark'>Key</td>
                <td>Value</td>
            </tr>
            <tr>
                <td className='padding-left-0 text-color-dark'>Key</td>
                <td>Value</td>
            </tr>
            <tr>
                <td className='padding-left-0 text-color-dark'>Key</td>
                <td>Value</td>
            </tr>
            <tr>
                <td className='padding-left-0 text-color-dark'>Key</td>
                <td>Value</td>
            </tr>
        </tbody>
    </table>
);

const CustomContentExample = () => {
    const [currentContentBlock, setCurrentContentBlock] = useState(0);

    const content = [dummyTextShort, dummyText, dummyTextLong];

    const switchContent = (event: React.MouseEvent<HTMLSpanElement>) => {
        event.preventDefault();
        const contentIdAttr = event.currentTarget.getAttribute('data-contentid');
        if (contentIdAttr) {
            const contentId = Number.parseInt(contentIdAttr, 10);
            setCurrentContentBlock(contentId);
        }
    };

    return (
        <div>
            <ul className='nav nav-pills nav-justified'>
                <li className={`${currentContentBlock === 0 ? 'active' : ''}`}>
                    <span data-contentid={0} onClick={switchContent}>
                        Content Block 1
                    </span>
                </li>
                <li className={`${currentContentBlock === 1 ? 'active' : ''}`}>
                    <span data-contentid={1} onClick={switchContent}>
                        Content Block 2
                    </span>
                </li>
                <li className={`${currentContentBlock === 2 ? 'active' : ''}`}>
                    <span data-contentid={2} onClick={switchContent}>
                        Content Block 3
                    </span>
                </li>
            </ul>
            <div className='padding-top-15'>{content[currentContentBlock]}</div>
            <SidebarDialogExample />
        </div>
    );
};

export default SidebarDemos;
```

#### HTML (html)

```html
<div class="display-flex flex-wrap">
    <div class="flex-1-1">
        <div class="h5">Left sidebars</div>
        <div class="form-group">
            <label class="width-100pct">Resizable fly Sidebar:</label>
            <button type="button" class="btn btn-default btn-toggle btn-component btn btn-default" tabindex="0">Toggle Sidebar</button>
        </div>
    </div>
    <div class="flex-1-1">
        <div class="h5">Right sidebars</div>
        <div class="form-group">
            <label class="width-100pct">Resizable fluid Sidebar with resize limits and custom header button:</label>
            <button type="button" class="btn btn-default btn-toggle btn-component btn btn-default" tabindex="0">Toggle Sidebar</button>
        </div>
        <div class="form-group">
            <label class="width-100pct">Fly Sidebar which overlays content:</label>
            <button type="button" class="btn btn-default btn-toggle btn-component btn btn-default" tabindex="0">Toggle Sidebar</button>
        </div>
        <div class="form-group">
            <label class="width-100pct">Fly Sidebar with custom width and visible backdrop:</label>
            <button type="button" class="btn btn-default btn-toggle btn-component btn btn-default" tabindex="0">Toggle Sidebar</button>
        </div>
        <div class="form-group">
            <label class="width-100pct">Sidebar which switches mode automatically on defined breakpoint between fly and fluid:</label>
            <button type="button" class="btn btn-default btn-toggle btn-component btn btn-default" tabindex="0">Toggle Sidebar</button>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| fly | boolean | false | Defines if the component will overlap the body content. |
| closed | boolean | false | Defines whether the component is hidden or not. |
| disableClose | boolean | false | Hides the close button. This may be used when the sidebar is always visible and may not be closed. |
| onClose | VoidFunction | — | Callback function triggered when clicking the close icon. |
| footer | string \| React.ReactNode | — | The Footer content. For example a save button. |
| footerClassName | string | — | Additional classes added to the Sidebar footer. |
| headerButtons | React.ReactNode | — | Additional buttons to be rendered in the header. |
| headerClassName | string | — | Additional classes added to the Sidebar header. |
| showHeaderBorder | boolean | — | Shows a sidebar header border |
| width | number | 350 | Defines the width of the component. The value is set as pixel value as inline style. Note: In the past, the type allowed to pass in a sting value like "400px" but that is not possible anymore due to internal width calculations. To be backwards compatible for non Typescript projects, the width is converted to a number. |
| minWidth | number | 100 | Defines the minimum width in px of the component that will take effect when resizing. |
| maxWidth | number | 800 | Defines the maximum width in px of the component that will take effect when resizing. |
| openInFullscreen | boolean | false | Opens Sidebar in fullscreen, means 100vw. |
| onFullScreenChange | (newFullscreenState: boolean) => void | — | Callback for when the fullscreen is toggled. |
| enableFullscreenToggle | boolean | false | Enables the fullscreen functionality and shows the fullscreen toggle. |
| fullscreenToggleTooltip | string | — | Translated tooltip text for the fullscreen toggle button. |
| position | ObjectValues<typeof SidebarPosition> | 'left' | Tells the sidebar where it is positioned. This will affect the resizing behavior respectively. Note: the position need to be set properly whe using the resize functionality to know on which side of the sidebar to attach the resizer handle. It is also relevant when the sidebar mode is set to fly to properly animate the sidebar into the view. Possible values are: 'left' 'right' Sidebar.LEFT Sidebar.RIGHT |
| resizable | boolean | false | Defines whether or not the sidebar is resizable. |
| onResizeEnd | VoidFunction | — | Callback for when the resize is done. |
| switchModeBreakpoint | number | — | Defines the breakpoint in pixel when the sidebar mode shall be changed. If the window width is lower than the given breakpoint the mode is set to fly. If the window width is higher the mode is set to fluid. This functionality is disabled by default and will be enabled when defining a breakpoint higher than 0. |
| disableEsc | boolean | false | By default the fullscreen mode can be left with "esc". If this is unwanted it can be disabled. |
| hasBackdrop | boolean | false | Defined whether or not a backdrop will be rendered behind the Sidebar to avoid clicks outside. |
| hasSmoothScrollbar | boolean | false | Defined whether or not the UIKIT SmoothScrollbar is active. |
| makeBackdropVisible | boolean | false | Defined whether or not the backdrop is visible similar to the backdrop for modal dialogs. |
| onBackdropClick | VoidFunction | — | Callback for when the backdrop is clicked. This comes in handy when handling transient data from the sidebar which need to be saved first and handle clicks outside. |
| bodyRef | React.MutableRefObject<HTMLDivElement \| null> | — | Additional ref added to the Sidebar body. |
| title | string \| React.ReactNode | — | Content that will be displayed in the components header. |
| titleClassName | string | — | Additional classes added to the Sidebar title. |
| backdropClassName | string | — | Additional classes added to the Sidebar backdrop. |
| bodyClassName | string | — | Additional classes added to the Sidebar body. |
| className | string | — | Additional classes added on the wrapper element. |