# Vue Sidebar Component > Vue Sidebar is a powerful and customizable responsive navigation component for any type of vertical navigation. Bootstrap Sidebar come with built-in support for branding, navigation, and more. ## How it works Here's what you need to know before getting started with the Vue Sidebar component: - `CSidebar` renders the `.sidebar` container. - On mobile devices, the sidebar is hidden by default. Control it with the `visible` prop. - On desktop devices, the sidebar is shown by default. Hide it with `:visible="false"`. - Use `narrow` to switch the sidebar to the narrow variant. - Use `unfoldable` to switch the sidebar to the narrow-unfoldable variant. - `CSidebarNav` renders `.sidebar-nav` and supports nested groups through `CNavGroup`. - For accessibility, prefer semantic elements such as `nav`, or add `role="navigation"` when using `as="div"` on `CSidebarNav`. ## Supported content Sidebar comes with built-in support for a handful of sub-components. Choose from the following as needed: - `` for an optional header. - `` for your company, product, or project name. - `` for a full-height and lightweight navigation, including nested groups. - `` for an optional footer. - `` for toggling the sidebar state. ## Examples Below is a more complete sidebar example shown by default on desktop devices. It combines several optional features in a single demo, including narrow visibility helpers, tree navigation, nested groups, a custom group indicator, badges, and a footer dropdown. ```html ``` ### Narrow sidebar Add the `narrow` prop to make the sidebar narrow. Use `.d-sidebar-narrow` to show content only in the narrow state and `.d-sidebar-narrow-none` to hide content in the narrow state. These utility classes replace older brand-specific visibility helpers. ```html ``` ### Unfoldable sidebar Add the `unfoldable` prop to make the sidebar narrow and expand it on hover. Use `.d-sidebar-narrow-unfoldable` and `.d-sidebar-narrow-unfoldable-none` to control content visibility for unfoldable sidebars. ```html ``` ### Narrow visibility helpers Use the sidebar visibility helpers to swap content between regular, narrow, and narrow-unfoldable variants: - `.d-sidebar-narrow` shows content only in the narrow state. - `.d-sidebar-narrow-none` hides content in the narrow state. - `.d-sidebar-narrow-unfoldable` shows content only when the sidebar uses the unfoldable variant. - `.d-sidebar-narrow-unfoldable-none` hides content when the sidebar uses the unfoldable variant. ## Navigation Use `CSidebarNav` as the main navigation container inside a sidebar. It supports plain links, section titles, nested groups, tree navigation, compact navigation, and custom group indicators. ### Basic navigation Use the following building blocks inside `CSidebarNav`: - `` for section headings. - `` for each navigation entry. - `` for standalone navigation links. - `CIcon` with `customClassName="nav-icon"` for optional leading icons. - `` or utility classes such as `ms-auto` for trailing metadata. ### Navigation groups Use `` for expandable navigation sections. The `togglerContent` slot defines the clickable label, and nested `CNavItem` or `CNavGroup` components become the group content. Set `visible` on `CNavGroup` when the group should be expanded by default. Use the `compact` prop on `CNavGroup` to reduce spacing only for that nested group. ### Compact navigation _Added in 5.9.0._ Add the `compact` prop to `CSidebarNav` to reduce the vertical padding across the entire navigation. Use the `compact` prop on `CNavGroup` to compact only a nested section. ```html ``` ### Tree navigation _Added in 5.9.0._ Add `variant="tree"` to `CSidebarNav` to render nested groups as a tree. Nested groups automatically keep their hierarchy, making deeper navigation levels easier to scan. ```html ``` ### Group indicator By default, `CNavGroup` renders the standard group indicator through the `.nav-group-toggle` styles, so no additional markup is required. ```html ``` ### Custom group indicator To replace the default indicator, pass custom indicator markup inside the `togglerContent` slot using a `.nav-group-toggle-indicator` element. The `togglerContent` slot is a scoped slot that receives `{ visible }`, so you can swap icons yourself based on the group state. ```html ``` ### Controlled navigation group _Added in 5.9.0._ `CNavGroup` works uncontrolled by default—clicking the toggler expands and collapses it. To control it from the parent, bind `visible` and listen to `update:visible` (or use `v-model:visible`). In controlled mode the toggler only requests a change through `update:visible`; the group follows the `visible` prop, so the parent has the final say. This makes it possible to keep a section open even when the user clicks to collapse it—useful for a route-aware sidebar that must keep the active section expanded. Toggle the lock and try to collapse the group: while locked, the parent rejects the change and the group stays open. ```html ``` ## Dark sidebar Change the appearance of sidebars with `colorScheme="dark"`. ```html ``` ## Placement By default, placement for sidebar components is on the left side of the viewport, but you can change it with the `placement` prop: - `placement="start"` places the sidebar on the left side of the viewport. - `placement="end"` places the sidebar on the right side of the viewport. ## API Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here. - [<CSidebar />](./api/#csidebar) - [<CSidebarBrand />](./api/#csidebarbrand) - [<CSidebarFooter />](./api/#csidebarfooter) - [<CSidebarHeader />](./api/#csidebarheader) - [<CSidebarNav />](./api/#csidebarnav) - [<CSidebarToggler />](./api/#csidebartoggler)