Drawer Directions

Temper supports 4 primary presentation directions: bottom (default), top, left, and right.

---

Configuring Direction

Pass the direction prop to Drawer.Root:

<Drawer.Root direction="right">
  <Drawer.Trigger className="btn">Open Right Sidebar</Drawer.Trigger>
  <Drawer.Portal>
    <Drawer.Overlay className="fixed inset-0 bg-black/40" />
    <Drawer.Content className="fixed top-0 bottom-0 right-0 w-80 bg-white p-6 shadow-2xl">
      <Drawer.Title>Right Drawer</Drawer.Title>
      <Drawer.Description>Sidebar navigation sheet</Drawer.Description>
    </Drawer.Content>
  </Drawer.Portal>
</Drawer.Root>

---

Direction Comparison

Direction	Typical Layout Position	Typical Use Case
bottom (default)	fixed bottom-0 left-0 right-0	Mobile action sheets, filters, dialogs
top	fixed top-0 left-0 right-0	Notification banners, search drawers
left	fixed top-0 bottom-0 left-0	Left navigation drawer / mobile menu
right	fixed top-0 bottom-0 right-0	Inspector panels, cart drawers, filter bars

---

Handle Placement per Direction

Position <Drawer.Handle /> appropriately for the selected orientation:

• bottom: Top center of content (mx-auto mb-4).
• top: Bottom center of content (mx-auto mt-4).
• left: Right vertical edge (my-auto mr-2).
• right: Left vertical edge (my-auto ml-2).