nb-sidebar

This is a sidebar component for Vue.js 3+. It displays a slide-out sidebar panel that can be positioned on the left or right side of the screen with customizable themes, responsive breakpoints, and overlay backdrop.

Loading component...

Installation

Yarn

yarn add @vlalg-nimbus/nb-overlays

Usage

import { createApp } from 'vue'
import App from './App.vue'

import NbOverlaysComponents from '@vlalg-nimbus/nb-overlays'
import "@vlalg-nimbus/nb-overlays/dist/style.css";

const app = createApp(App)
app.use(NbOverlaysComponents)
app.mount('#app')

To use, simply call the component, in this case it will be NbSidebar or nb-sidebar.

Important: The NbSidebar component uses position: fixed and will overlay the page content. It automatically handles responsive visibility based on breakpoints (visibleOnMobile, visibleOnTablet, visibleOnDesktop). When the sidebar is open, it blocks body scroll by default (unless scrollableBody is true).

Mode 1

<template>
  <NbSidebar nb-id="sidebar-1" :show="isSidebarOpen" @close="isSidebarOpen = false">
    <template #content>
      <p>Sidebar content here</p>
    </template>
  </NbSidebar>
</template>

Preview & Playground

Select the component you want to edit/test

Loading Sandbox...

Props

Items with an (*) mean they are required

name	Value type	Default	Description
nbId (*)	String		Sets the id attribute to differentiate from other components
show	Boolean	true	Defines if the sidebar is visible
ariaLabel	String	'Alternate Text Button'	Defines the aria-label attribute for screen readers
ariaAttrs	Object	{}	Allows passing custom aria attributes as an object. Keys will automatically receive the `aria-` prefix
theme	String	'light'	Defines the theme. Accepts light and dark
position	String	'left'	Defines the position of the sidebar. Accepts left and right
backdropRGBColor	Object	{ r: 0, g: 0, b: 0 }	Defines the RGB color of the backdrop overlay. Must be an object with `r`, `g`, `b` properties (0-255)
backdropAlpha	Number	0.6	Defines the alpha/opacity of the backdrop overlay (0-1)
showBottomSection	Boolean	false	Defines if the bottom section should be displayed
showSectionBorder	Boolean	false	Defines if the bottom section should have a border
showCloseButton	Boolean	true	Defines if the close button should be displayed
closeButtonY	Number	13	Defines the top position of the close button in pixels
closeButtonX	Number	32	Defines the right position of the close button in pixels
closeOnOverlayClick	Boolean	true	Defines if clicking the overlay should close the sidebar
contentPadding	String	'10px'	Defines the padding of the content area
bottomSectionHeight	Number	63	Defines the height of the bottom section in pixels
disabled	Boolean	false	Defines if the sidebar is disabled
visibleOnMobile	Boolean	true	Defines if the sidebar should be visible on mobile breakpoints
visibleOnTablet	Boolean	true	Defines if the sidebar should be visible on tablet breakpoints
visibleOnDesktop	Boolean	true	Defines if the sidebar should be visible on desktop breakpoints
scrollableBody	Boolean	false	Defines if the body should remain scrollable when sidebar is open
minWidthContentSize	Number	270	Defines the minimum width of the sidebar content in pixels
maxWidthContentSize	Number	320	Defines the maximum width of the sidebar content in pixels
mobileMinWidth	Number	0	Defines the minimum width for mobile breakpoint in pixels
mobileMaxWidth	Number	767	Defines the maximum width for mobile breakpoint in pixels
tabletMinWidth	Number	768	Defines the minimum width for tablet breakpoint in pixels
tabletMaxWidth	Number	1023	Defines the maximum width for tablet breakpoint in pixels
desktopMinWidth	Number	1024	Defines the minimum width for desktop breakpoint in pixels
desktopMaxWidth	Number	1600	Defines the maximum width for desktop breakpoint in pixels
zIndex	Number	2147483640	Defines the z-index for the backdrop overlay. The sidebar content will automatically receive `zIndex + 2`. Important: The maximum value is `2147483640` because the content always adds +2 to this value

Theme Colors (Light)

name	Value type	Default	Description
lightCloseButtonColor	String	'#333333'	Defines the close button color for light theme
lightContentColor	String	'#333333'	Defines the content text color for light theme
lightSectionColor	String	'#333333'	Defines the bottom section text color for light theme
lightBackgroundColor	String	'#f5f5f5'	Defines the background color for light theme
lightSectionBackground	String	'#eae4e4'	Defines the bottom section background color for light theme
lightSectionBorderColor	String	'#cfc2c2'	Defines the bottom section border color for light theme

Theme Colors (Dark)

name	Value type	Default	Description
darkCloseButtonColor	String	'#e0e0e0'	Defines the close button color for dark theme
darkContentColor	String	'#333333'	Defines the content text color for dark theme
darkSectionColor	String	'#333333'	Defines the bottom section text color for dark theme
darkBackgroundColor	String	'#2d2d2d'	Defines the background color for dark theme
darkSectionBackground	String	'#2d2d2d'	Defines the bottom section background color for dark theme
darkSectionBorderColor	String	'#eee'	Defines the bottom section border color for dark theme

Slots

name	Description
content	Main content area of the sidebar
bottom-section	Optional bottom section content (requires `showBottomSection` to be `true`)
close-button	Custom close button content (replaces the default "✕")

Events

name	Return type	Description
close	nothing	Fired when the sidebar is closed (via close button, overlay click, or programmatically)

Provide / Inject

The component provides showSidebar (a reactive ref) that can be injected by child components to access the sidebar's visibility state.

Usage in child components

<script setup>
import { inject } from 'vue'

const showSidebar = inject('showSidebar')

// Access the sidebar visibility state
console.log(showSidebar.value) // true or false
</script>

This is useful when you need to conditionally render content or apply styles based on whether the sidebar is open or closed.

Nb Loadersnb-page-scroll-bar

Nb Overlaysnb-modal