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. |
| closeIcon | string | pi pi-times | Icon to display in the sidebar close button. |
| modal | boolean | true | Whether to a modal layer behind the sidebar. |
| ariaCloseLabel | string | close |
Aria label of the close icon.
Deprecated: aria.close can be used in defaults to PrimeVue |
| blockScroll | boolean | true | Whether background scroll should be blocked when sidebar is visible. |
| 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. |
Sidebar component uses complementary role by default, since any attribute is passed to the root element aria role can be changed depending on your use case and additional attributes like aria-labelledby can be added. In addition aria-modal is added since focus is kept within the sidebar when opened.
Trigger element also requires aria-expanded and aria-controls to be handled explicitly.
<Button label="Show" icon="pi pi-external-link" @click="visible = true" :aria-controls="visible ? 'sbar' : null" :aria-expanded="visible"/>
<Sidebar id="sbar" v-model:visible="visible" role="region" >
<p>Content</p>
</Sidebar>
| Key | Function |
|---|---|
| tab | Moves focus to the next the focusable element within the sidebar. |
| shift + tab | Moves focus to the previous the focusable element within the sidebar. |
| escape | Closes the dialog. |
| Key | Function |
|---|---|
| enter | Closes the sidebar. |
| space | Closes the sidebar. |
None.