About this block

Nav With Reorder Bar pairs the standard store header with a buy again strip beneath it: chips for the four staples from the last order, each showing a thumb, name, price, and a one tap add, labeled with the delivery date they came from. It turns the header into a replenishment shortcut for stores people reorder from on a rhythm.

The staples are a small array of name and price; the delivery date and thumbs are wired from the order record. The strip scrolls horizontally on narrow screens so the chips never wrap, and each add button carries a full label for assistive tech.

When to use

Reach for this block as the site header on grocery, pantry, and consumables stores where the same basket comes back week after week. Surfacing the last order's staples at the top of the page turns a fresh shop into two taps, which is the whole game for repeat purchase.

A natural flow around it on an Ecommerce Pro page:

Before

• Nothing, navbars open the page

After

• Subscription
• Product grid

What you can display

One strong use is the pantry replenishment strip. Other bar contents:

• Staple chips. Each frequent item with its thumb, price, and a single tap to add it back.
• Delivery context. The date of the order the chips are drawn from, so the suggestion feels current.
• Full history link. A quiet route to every past order for anyone who wants the longer list.

Tip: cap the strip at the handful of items a shopper actually repeats; a reorder bar with twenty chips is just the catalog again, and it stops feeling like a shortcut.