Drawer — Component Library

Positions

Drawers can slide in from any of the four edges. Right is the most common for detail panels; left for navigation; top/bottom for contextual actions on mobile.

Left drawer

Content anchored to the left edge. Commonly used for primary navigation or a sidebar menu.

Right drawer

Content anchored to the right edge. Commonly used for detail panels, filters, or settings.

Top drawer

Content anchored to the top edge. Useful for global search or notification panels.

Bottom drawer

Content anchored to the bottom edge. Common for mobile action sheets and quick filters.

Sizes

Narrow for quick panels (filters, notifications), default for most use cases, wide for rich content like product detail or order review.

Navigation drawer

Left-anchored drawer with grouped navigation links. Typical for a mobile or condensed admin sidebar.

TK

Toko Kita

tokokita.id

Store

Settings

Cart drawer

Right-anchored drawer for shopping cart preview. Supports quantity adjustments and a sticky checkout footer.

s + i.price * i.qty, 0); }, remove(idx) { this.items.splice(idx, 1); }, fmt(n) { return new Intl.NumberFormat('id-ID').format(n); } }" >

Cart ()

Subtotal Rp

Filter drawer

Right-anchored filter panel with grouped controls. Supports apply and reset actions with a sticky footer.

Filters

Order status

Pending Processing Shipped Delivered Cancelled

Price range

Min

Max

Rp – Rp

States

Loading state while content is being fetched, and an error state when the request fails.

Order #10291

Order detail