Can we add a sidebar component?

[tmd-user]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

I found that since bootstrap was released, there has never been an official sample sidebar navigation, only the top menu bar.

Motivation and context

You can refer to https://webpixels.io/library/navigation/sidebar using the offcanvas component to implement it

[julien-deramond]

To me, a sidebar is very project-specific, so the only truly reusable part is the Offcanvas (or Drawer in v6)—the container where you can place any kind of content. We only provide a few quick examples for sidebars.

We could build a Sidebar component, but in my opinion it would be a fairly weak abstraction since it would only reflect one particular way of implementing a sidebar. It would need a lot of customizable aspects and variables. That said, it might still be helpful as a starting point.

@mdo The old sidebar issues are closed, but if you have a different perspective or suggestions for v6, I’m labeling this one as v6 so you can track it.

[tmd-user]

Thanks for your reply! @julien-deramond I am aware of the existing sidebar examples, but with all due respect, they are mostly static HTML snippets and do not address the actual responsive pain points that developers face in modern web apps.
I would argue that a Sidebar Layout Component (or a set of structured utility classes) is not a "weak abstraction," but rather a highly necessary one, much like the existing Navbar component.
Here is why:

1. The "Navbar" Analogy (Horizontal vs. Vertical)
   Bootstrap’s .navbar is a masterpiece of abstraction. Navbars are highly customizable and project-specific (they contain logos, forms, dropdowns, etc.), yet Bootstrap successfully abstracted their responsive behavior with .navbar-expand-{breakpoint} and .navbar-toggler.
   Sidebars are essentially the vertical counterpart of Navbars. They deserve a similar layout pattern (e.g., .sidebar-expand-{breakpoint}), managing the switch between a fixed vertical layout on desktop and an Offcanvas/Drawer on mobile.
2. The Pain of Responsive Duplication (The Real Issue)
   Currently, if a developer wants a sidebar that is always visible on desktop, but collapsible via a button (in an Offcanvas) on mobile:
   They either have to duplicate the navigation markup (one inside an .offcanvas for mobile, and one inside a standard column for desktop).
   Or, they have to write heavy custom CSS media queries to manually override and strip away .offcanvas positioning (position, transform, visibility, width) on larger viewports to make it behave like a static sidebar.
   This is a tedious layout puzzle that every Bootstrap user has to solve repeatedly.
3. Universal Use Cases (Not Just for Dashboards)
   This responsive switching behavior isn't exclusive to Admin Dashboards. It is widely used in:
   Documentation sites (the table of contents that tucks into a drawer on mobile).
   In-page settings/filters (like an e-commerce filter sidebar that turns into a mobile drawer).
   Web applications (where tools/menus are hidden under a hamburger icon on mobile).
   What we actually need (A proposed "Strong Abstraction")
   We don't need Bootstrap to define the specific styling of the sidebar items. What we need is the responsive structure:
   A way to toggle the sidebar's width (e.g., normal vs. compact/icon-only) on desktop via JS/CSS variables.
   A native way to transition the container from a static desktop layout to an offcanvas drawer on mobile without duplicating HTML or hacking the .offcanvas core classes.
   I hope the team can reconsider this for v6. Responsive vertical layouts are just as fundamental as horizontal ones!

[mdo]

I'm not opposed to exploring it. It's very similar to the navbar component. Will need to hold on it for v6.1 or something though—we've got enough cleanup and polish for v6 before adding another big component. Could be possible to build on top of the drawer or something, but haven't thought much about it.