Drawer()

Drawer(__namedParameters): Element

Drawer - Slide-in panel for navigation or contextual content

A flexible panel that slides in from the viewport edge and supports stacked views, headers, footers, and programmatic triggers.

Parameters

__namedParameters

DrawerProps

Returns

Element

Example

const ids = { drawer: uuid(), a: uuid() };

<DrawerLayout push="left">
  <DrawerLayoutMain>
    <DrawerTrigger for={`open:${ids.a}`}>
      <Button variant="icon">Open</Button>
    </DrawerTrigger>
  </DrawerLayoutMain>

  <Drawer id={ids.drawer} defaultView={ids.a}>
    <DrawerPanel>
      <DrawerView id={ids.a}>
        <DrawerHeader title="Title A" />
        <DrawerContent>Content for View A</DrawerContent>
      </DrawerView>
    </DrawerPanel>
  </Drawer>
</DrawerLayout>