TwigcnBundle

Drawer

A panel that slides in from the edge of the screen.

Basic Drawer

Drawer Title

This is a basic drawer example.

Drawer content goes here.

Different Sides

Left Drawer

This drawer slides in from the left.

Right Drawer

This drawer slides in from the right.

Top Drawer

This drawer slides in from the top.

Bottom Drawer

This drawer slides in from the bottom.

With Form

Create New Item

Fill in the details below.

Navigation Drawer

Navigation

Usage

<twig:DrawerTrigger for="my-drawer" class="btn-outline">
    Open Drawer
</twig:DrawerTrigger>

<twig:Drawer id="my-drawer" side="right">
    <twig:DrawerContent>
        <twig:DrawerHeader>
            <h3>Title</h3>
        </twig:DrawerHeader>
        <div class="p-4">Content</div>
        <twig:DrawerFooter>
            <twig:DrawerClose class="btn-outline">Close</twig:DrawerClose>
        </twig:DrawerFooter>
    </twig:DrawerContent>
</twig:Drawer>

<twig:Drawer id="my-drawer" side="right" :closeOnBackdrop="false">
    ...
</twig:Drawer>