Skip to content
Home

Drawer

Info
Demos
Properties
Events

Demos

Basic Drawer

Code Editor
<Drawer

  title="Drawer title"

  triggerAttributes={{

    text: 'Open drawer',

  }}

>

  <P top>Some informational content</P>

  <P top>

    Elementum eu suspendisse sit platea elit porttitor magna laoreet ad

    ultrices tempus urna curae parturient conubia quisque viverra eget

    vestibulum neque pulvinar semper vulputate id dis varius pellentesque

    nunc egestas risus amet mus aptent luctus imperdiet netus natoque

    cubilia mattis nostra proin ornare scelerisque sodales faucibus

    placerat sem bibendum pretium rutrum vitae sociis ligula inceptos morbi

    quam mi sed pharetra fermentum tortor ullamcorper ipsum tellus eros

    euismod volutpat nisl dui lectus fames suscipit phasellus praesent

    justo mollis montes velit taciti gravida

  </P>

</Drawer>

Basic Drawer left placement

Code Editor
<Drawer title="Drawer title" containerPlacement="left">

  <P top>Some informational content</P>

  <P top>

    Elementum eu suspendisse sit platea elit porttitor magna laoreet ad

    ultrices tempus urna curae parturient conubia quisque viverra eget

    vestibulum neque pulvinar semper vulputate id dis varius pellentesque

    nunc egestas risus amet

  </P>

</Drawer>

Basic Drawer in fullscreen

Code Editor
<Drawer

  fullscreen

  title="Drawer title"

  triggerAttributes={{

    text: 'Open drawer',

  }}

>

  <P top>Some informational content</P>

  <P top>

    Elementum eu suspendisse sit platea elit porttitor magna laoreet ad

    ultrices tempus urna curae parturient conubia quisque viverra eget

    vestibulum neque pulvinar semper vulputate id dis varius pellentesque

    nunc egestas risus amet

  </P>

</Drawer>

Drawer with custom content

Code Editor
<Drawer title="Custom title">

  <Drawer.Navigation>

    <Breadcrumb onClick={handleBack} />

  </Drawer.Navigation>

  <Drawer.Header>

    <P bottom>This is a lorem ipsum dolor</P>

    <Button bottom size="large">

      Lorem ipsum

    </Button>

    <Button bottom size="large" variant="secondary">

      Dolor sit

    </Button>

    <FormStatus state="info">This is a lorem ipsum dolor</FormStatus>

    <Tabs

      id="unique-linked-id"

      data={[

        {

          title: 'One',

          key: 'one',

        },

        {

          title: 'Two',

          key: 'two',

        },

      ]}

    />

  </Drawer.Header>

  <Drawer.Body>

    <Tabs.Content id="unique-linked-id">

      {({ title }) => {

        return (

          <>

            <H2>{title}</H2>

            <P top>This is a left aligned Drawer content.</P>

            <P top>

              Elementum eu suspendisse sit platea elit porttitor magna

              laoreet ad ultrices tempus urna curae parturient conubia

              quisque viverra eget vestibulum neque pulvinar semper

              vulputate id dis varius pellentesque nunc egestas risus amet

              mus aptent luctus imperdiet netus natoque cubilia mattis

              nostra proin ornare scelerisque sodales faucibus placerat sem

              bibendum pretium rutrum vitae sociis ligula inceptos morbi

              quam mi sed pharetra fermentum tortor ullamcorper ipsum

              tellus eros euismod volutpat nisl dui lectus fames suscipit

              phasellus praesent justo mollis montes velit taciti gravida

              lacus commodo senectus feugiat lorem etiam consequat

              penatibus cum hendrerit accumsan orci potenti purus nulla

            </P>

          </>

        )

      }}

    </Tabs.Content>

  </Drawer.Body>

</Drawer>

Customize trigger button

Code Editor
<Drawer

  title="Drawer with custom trigger"

  triggerAttributes={{

    text: 'Custom trigger',

    variant: 'primary',

    size: 'large',

    icon: 'loupe',

    icon_position: 'left',

  }}

>

  <Drawer.Body spacing>

    <P>Opened a Drawer with a custom trigger button!</P>

  </Drawer.Body>

</Drawer>

Close Drawer by callback method

Code Editor
<Drawer

  title="Drawer title"

  triggerAttributes={{

    text: 'Open drawer',

  }}

  hideCloseButton

>

  {({ close }) => (

    <>

      <Button text="Close by callback" on_click={close} />

    </>

  )}

</Drawer>

Remove animation and spacing

Code Editor
<Drawer

  title="No spacing or animation"

  noAnimation

  spacing={false}

  hideCloseButton

>

  <Drawer.Body>

    <P top bottom>

      This is a lorem ipsum dolor

    </P>

    <Button bottom size="large">

      Lorem ipsum

    </Button>

    <Button bottom size="large" variant="secondary">

      Dolor sit

    </Button>

    <FormStatus state="info">This is a lorem ipsum dolor</FormStatus>

  </Drawer.Body>

</Drawer>