import Sidebar from 'primevue/sidebar';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/sidebar/sidebar.min.js"></script>
Sidebar is used as a container and visibility is controlled with the visible property that requires a v-model two-way binding.
<Sidebar v-model:visible="visibleLeft">
Content
</Sidebar>
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
Sidebar can either be located on the left (default), right, top or bottom of the screen depending on the position property.
<Sidebar v-model:visible="visibleRight" position="right">
Content
</Sidebar>
Sidebar size can be changed using a fixed value or using one of the three predefined ones.
<Sidebar v-model:visible="visibleLeft" class="p-sidebar-sm"></Sidebar>
<Sidebar v-model:visible="visibleLeft" class="p-sidebar-md"></Sidebar>
<Sidebar v-model:visible="visibleLeft" class="p-sidebar-lg"></Sidebar>
Full screen mode allows the sidebar to cover whole screen.
<Sidebar v-model:visible="visibleFull" position="full">
Content
</Sidebar>
| Name | Type | Default | Description |
|---|---|---|---|
| visible | boolean | false | Specifies the visibility of the dialog. |
| position | string | left | Specifies the position of the sidebar, valid values are "left", "right", "top", "bottom" and "full". |
| baseZIndex | number | 0 | Base zIndex value to use in layering. |
| autoZIndex | boolean | true | Whether to automatically manage layering. |
| dismissable | boolean | true | Whether clicking outside closes the panel. |
| showCloseIcon | boolean | true | Whether to display a close icon inside the panel. |
| modal | boolean | true | Whether to a modal layer behind the sidebar. |
| ariaCloseLabel | string | close | Aria label of the close icon. |
| Name | Parameters | Description |
|---|---|---|
| hide | - | Callback to invoke when sidebar gets hidden. |
| show | - | Callback to invoke when sidebar gets shown. |
| Name | Parameters |
|---|---|
| header | - |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-sidebar | Container element |
| p-sidebar-left | Container element of left sidebar. |
| p-sidebar-right | Container element of right sidebar. |
| p-sidebar-top | Container element of top sidebar. |
| p-sidebar-bottom | Container element of bottom sidebar. |
| p-sidebar-full | Container element of a full screen sidebar. |
| p-sidebar-active | Container element when sidebar is visible. |
| p-sidebar-close | Close anchor element. |
| p-sidebar-sm | Small sized sidebar. |
| p-sidebar-md | Medium sized sidebar. |
| p-sidebar-lg | Large sized sidebar. |
| p-sidebar-mask | Modal layer of the sidebar. |
None.