Nav With Mini Cart Panel
Navbar with its mini cart open below: two line items with thumbs, a free shipping progress meter, subtotal, and one checkout route.
Navbar with its mini cart open below: two line items with thumbs, a free shipping progress meter, subtotal, and one checkout route.
Search blocks by description or jump to a page.
The source for every Ecommerce block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Nav With Mini Cart Panel shows the header with its cart drawer already open: the standard bar on top with logo, nav links, search, account, and an active cart button, then the mini cart below carrying two line items with thumbs, a free shipping meter, the subtotal, and one route to checkout. It is the static blueprint for the drawer, not a live popover.
The line items are a small array; the meter, subtotal, and copy are wired from the cart record. The panel is anchored to the right so it lines up under the cart button, and the progress bar reports its state through proper progressbar roles for assistive tech.
Reach for this block as the site header the moment a shopper adds something and you want the cart confirmed without a full page trip. The open panel belongs in the layout as a drawer; this block gives you the resolved markup to style against.
A natural flow around it on an Ecommerce Pro page:
Before
After
One strong use is the add to cart confirmation drawer. Other panel contents:
Tip: the meter earns its place only when the threshold is close; showing a shopper they are $14 away converts, showing them $180 away just reads as a wall.