Drawer Shopping Cart

Bootstrap 6 Drawer shopping cart that slides in from the right with product rows, quantity steppers, a free-shipping progress bar, subtotal and checkout.

Also known as: slide in shopping cart, side cart drawer, mini cart sidebar, ecommerce cart panel

Bootstrap 6 Drawers Responsive #cart #drawer #ecommerce #responsive #sidebar

Drawer Shopping Cart live demo

Open in new tab

Bootstrap 6 code (HTML, CSS, JS)

Beautify

A slide-in shopping cart built on the Bootstrap 6 Drawer component. It opens from the right edge with product rows, quantity steppers, a free-shipping progress bar, a running subtotal and a Checkout button, which makes it a good fit for small online shops and product landing pages.

How it works

The root .dsc-root holds a demo shop page (header with a cart button, three products) and a <dialog class="drawer drawer-end dsc-drawer">. The cart button opens it through the Bootstrap 6 data API (data-bs-toggle="drawer"), and the close button uses data-bs-dismiss="drawer". In the demo the dialog carries the open attribute, so the cart is visible on first load. Remove that attribute and the cart starts closed.

Each cart row is an li.dsc-item with data-dsc-id and data-dsc-price. The quantity stepper is an input-group input-group-sm with .dsc-minus, a number input .dsc-qty-input and .dsc-plus. script.js handles clicks on the list and recalculates everything in render(): line totals, the item count in the header badge, subtotal, shipping, total, the .progress bar and its aria-valuenow. Quantities are clamped between 1 and 99. "Remove" fades the row out and moves focus to the next row. When the last row goes, the .dsc-empty message replaces the footer.

The "Add to cart" buttons (.dsc-add) read product data from the <template class="dsc-catalog">. They add a row or raise its quantity, then open the drawer with Drawer.getOrCreateInstance(drawer).show().

Customization

--dsc-accent on .dsc-root: changes the terracotta color. It also re-colors the Bootstrap 6 primary role (--bs-primary-bg and related tokens), so the badge and Checkout button follow.
data-dsc-free-shipping on .dsc-root: sets the free-shipping threshold (default 100).
data-dsc-currency on .dsc-root: sets the currency code used by Intl.NumberFormat.
SHIPPING_FEE and MAX_QTY at the top of script.js: set the flat shipping fee and the largest allowed quantity.
--bs-drawer-width on .dsc-drawer: makes the cart panel wider or narrower (420px by default).
Swap drawer-end for drawer-start to open the cart from the left.

The product photos come from Unsplash. Replace them with your own images.

Use cases

Small online shops: the cart slides in from the right with product rows and a running subtotal
Product landing pages: quantity steppers let shoppers change amounts without leaving the page
Stores with free shipping: a progress bar shows how far the order is from the threshold
Checkout flows: a clear Checkout button sits at the bottom of the panel

Accessibility

The drawer is a native <dialog> labelled by its title. After the first open it runs as a modal, with a focus trap and Escape to close. Every stepper button and quantity field has an aria-label that names the product. A visually hidden aria-live region (.dsc-status) announces quantity changes and removals. The script keeps aria-expanded on the cart button in sync, because the Bootstrap 6 alpha does not do this itself. The cart count has a visually hidden "items" suffix, and fade effects are turned off under prefers-reduced-motion.

Bootstrap 6 notes

<dialog class="drawer drawer-end"> replaces the Bootstrap 5 offcanvas offcanvas-end.
Buttons use btn-solid theme-primary, btn-outline theme-secondary and btn-text theme-danger instead of btn btn-primary.
Steppers use input-group-btn.
The spinner uses spinner-sm.
Built on 6.0.0-alpha.1, so alpha APIs can still change.

Usage notes

Checkout is simulated with a timeout. Replace it with a fetch() to your checkout endpoint.

Drawer Shopping Cart at a glance

Framework: Bootstrap 6
Code: HTML, CSS, JavaScript
JavaScript: Vanilla JavaScript, no jQuery
Dependencies: Bootstrap 6, Bootstrap Icons
Layout: Responsive, works on mobile
Category: Drawers
License: Free for personal and commercial use

Questions about this template

Can I use the Drawer Shopping Cart code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Bootstrap 6 and Bootstrap Icons from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

Add these to your page (already included in the download):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

Built for Bootstrap 6.0.0-alpha.1. Bootstrap 6 ships as an ES module, so its script and this component's JavaScript load with type="module". Alpha releases can still change before the stable version.