Drawer

Drawer adds a sidebar on the left or right side of the screen.

This example shows a Menu in the Drawer.

Code Example

<Drawer v-slot="{ toggleDrawer }">
  <DrawerContent class="p-4">
    <Button primary @click="() => toggleDrawer()">
      Open drawer
    </Button>
  </DrawerContent>
  <DrawerSide>
    <div class="w-80 h-full bg-base-200 text-base-content">
      <Flex class="justify-end">
        <Button sm ghost square class="mr-1 mt-1" @click="() => toggleDrawer()">
          <Icon name="feather:x" class="text-xl" />
        </Button>
      </Flex>
      <Menu>
        <MenuTitle>Sidebar Menu</MenuTitle>
        <MenuItem><a>Sidebar Item 1</a></MenuItem>
        <MenuItem><a>Sidebar Item 2</a></MenuItem>
      </Menu>
    </div>
  </DrawerSide>
</Drawer>

Components

Drawer components include the following:

Drawer
DrawerContent
DrawerSide

Drawer

Drawer wraps all Drawer-related components. It has the following props:

Prop	Type	Description
`open`	boolean	Controls open state externally. Can be used with `v-model:open`
`name`	string	When using nested drawers, give drawer component sets a unique name to avoid internal state conflicts. `default: "drawer"`
`end`	boolean	Causes the drawer to open from the right instead of left.

DrawerContent

DrawerContent wraps the page content area. It has one prop:

Prop	Type	Description
`name`	string	When using nested drawers, give drawer component sets a unique name to avoid internal state conflicts. `default: "drawer"`

DrawerSide

DrawerSide creates the sidebar. It has one prop:

Prop	Type	Description
`name`	string	When using nested drawers, give drawer component sets a unique name to avoid internal state conflicts. `default: "drawer"`

Examples

Slot Scope

All of the Drawer-related components have a default slot with the following:

isDrawerOpen boolean of the current state.
openDrawer function to open the drawer.
closeDrawer function to close the drawer.
toggleDrawer function to toggle the drawer.

Custom Drawer Content

The first example showed a Menu in the Drawer. Really, any kind of content can go in the drawer. This next example shows a div with some text inside.

Code Example

<Drawer class="w-full h-full">
  <DrawerContent v-slot="{ openDrawer }" class="flex flex-col items-center justify-center">
    <Button primary @click="openDrawer">
      Open Drawer
    </Button>
  </DrawerContent>

  <Drawer v-slot="{ closeDrawer }" class="rounded-l-lg">
    <div class="relative p-4 overflow-y-auto menu w-80 bg-base-100 text-base-content">
      You can put other content in the sidebar
    </div>
  </Drawer>
</Drawer>

Drawer on Right

You can use the right prop on Drawer to put the drawer on the right-hand side.

Code Example

<Drawer right class="w-full h-full">
  <DrawerContent v-slot="{ openDrawer }" class="flex flex-col items-center justify-center">
    <Button primary @click="openDrawer">
      Open Drawer
    </Button>
  </DrawerContent>

  <Drawer v-slot="{ closeDrawer }" class="rounded-l-lg">
    <div class="relative p-4 overflow-y-auto menu w-80 bg-base-100 text-base-content">
      You can put other content in the sidebar
    </div>
  </Drawer>
</Drawer>

The mobile prop on Drawer makes the drawer only behave like a drawer on mobile screens. On larger screens, the drawer will become a permanent sidebar. On a desktop browser, reduce the width of the browser to see the drawer in action, again.

Code Example

<Drawer mobile class="w-full h-full">
  <DrawerContent v-slot="{ openDrawer }" class="flex flex-col items-center justify-center">
    <Button primary @click="openDrawer">
      Open Drawer
    </Button>
  </DrawerContent>

  <Drawer v-slot="{ closeDrawer }" class="rounded-l-lg">
    <div class="relative p-4 overflow-y-auto menu w-80 bg-base-100 text-base-content">
      You can put other content in the sidebar
    </div>
  </Drawer>
</Drawer>

Prev Divider

Next Flex