Drawer

Side-anchored panel that slides in from screen edges.

Source Tailwind Javascript

package showcase

import (
	"github.com/templui/templui/internal/components/button"
	"github.com/templui/templui/internal/components/card"
	"github.com/templui/templui/internal/components/drawer"
	"github.com/templui/templui/internal/components/input"
)

templ DrawerDefault() {
	@drawer.Trigger(drawer.TriggerProps{
		For: "default-drawer",
	}) {
		@button.Button(button.Props{
			Variant: button.VariantOutline,
		}) {
			Open
		}
	}
	@drawer.Content(drawer.ContentProps{
		Position: drawer.PositionRight,
		ID:       "default-drawer",
	}) {
		@drawer.Header() {
			@drawer.Title() {
				Account
			}
			@drawer.Description() {
				Make changes to your account here. Click save when you are done.
			}
		}
		@card.Card() {
			@card.Content() {
				<div class="flex flex-col gap-4">
					@input.Input(input.Props{
						Type:        input.TypeText,
						Placeholder: "Name",
						ID:          "name",
						Value:       "John Doe",
					})
					@input.Input(input.Props{
						Type:        input.TypeText,
						Placeholder: "Username",
						ID:          "username",
						Value:       "@johndoe",
					})
				</div>
			}
		}
		@drawer.Footer() {
			@drawer.Close() {
				Cancel
			}
			@button.Button() {
				Save
			}
		}
	}
}

Installation

Install the component
```
templui add drawer
```
Add the JavaScript to your layout
```
@drawer.Script()
```
Call this template in your base layout file (e.g., in the <head> section).

Examples

Positions

package showcase

import (
	"github.com/templui/templui/internal/components/button"
	"github.com/templui/templui/internal/components/drawer"
)

templ DrawerPositions() {
	<div class="flex flex-wrap gap-2">
		@drawer.Trigger(drawer.TriggerProps{
			For: "top-drawer",
		}) {
			@button.Button(button.Props{
				Variant: button.VariantOutline,
			}) {
				Top
			}
		}
		@drawer.Content(drawer.ContentProps{
			Position: drawer.PositionTop,
			ID:       "top-drawer",
		}) {
			@drawer.Header() {
				@drawer.Title() {
					Top Drawer
				}
			}
			<p>This drawer slides in from the top of the screen.</p>
			@drawer.Footer() {
				@drawer.Close(drawer.CloseProps{
					For: "top-drawer",
				}) {
					Close
				}
			}
		}
		@drawer.Trigger(drawer.TriggerProps{
			For: "right-drawer",
		}) {
			@button.Button(button.Props{
				Variant: button.VariantOutline,
			}) {
				Right
			}
		}
		@drawer.Content(drawer.ContentProps{
			Position: drawer.PositionRight,
			ID:       "right-drawer",
		}) {
			@drawer.Header() {
				@drawer.Title() {
					Right Drawer
				}
			}
			<p>This drawer slides in from the right side of the screen.</p>
			@drawer.Footer() {
				@drawer.Close(drawer.CloseProps{
					For: "right-drawer",
				}) {
					Close
				}
			}
		}
		@drawer.Trigger(drawer.TriggerProps{
			For: "bottom-drawer",
		}) {
			@button.Button(button.Props{
				Variant: button.VariantOutline,
			}) {
				Bottom
			}
		}
		@drawer.Content(drawer.ContentProps{
			Position: drawer.PositionBottom,
			ID:       "bottom-drawer",
		}) {
			@drawer.Header() {
				@drawer.Title() {
					Bottom Drawer
				}
			}
			<p>This drawer slides in from the bottom of the screen.</p>
			@drawer.Footer() {
				@drawer.Close(drawer.CloseProps{
					For: "bottom-drawer",
				}) {
					Close
				}
			}
		}
		@drawer.Trigger(drawer.TriggerProps{
			For: "left-drawer",
		}) {
			@button.Button(button.Props{
				Variant: button.VariantOutline,
			}) {
				Left
			}
		}
		@drawer.Content(drawer.ContentProps{
			Position: drawer.PositionLeft,
			ID:       "left-drawer",
		}) {
			@drawer.Header() {
				@drawer.Title() {
					Left Drawer
				}
			}
			<p>This drawer slides in from the left side of the screen.</p>
			@drawer.Footer() {
				@drawer.Close(drawer.CloseProps{
					For: "left-drawer",
				}) {
					Close
				}
			}
		}
	</div>
}

API Reference

Required parameter

Hover for description

Trigger

Name	Type	Default
`ID` Unique identifier for the trigger element	`string`	`""`
`Class` Additional CSS classes to apply to the trigger	`string`	`""`
`Attributes` Additional HTML attributes to apply to the trigger	`templ.Attributes`	`nil`
`For` ID of the drawer to trigger when clicked	`string`	`""`

Content

Name	Type	Default
`ID` Unique identifier for the drawer content	`string`	`randomID`
`Class` Additional CSS classes to apply to the content container	`string`	`""`
`Attributes` Additional HTML attributes to apply to the content container	`templ.Attributes`	`nil`
`Position` Position from which the drawer slides in	`Position`	`""`
`InitialOpen` Whether the drawer should be open initially	`bool`	`false`

Header

Name	Type	Default
`ID` Unique identifier for the header element	`string`	`""`
`Class` Additional CSS classes to apply to the header	`string`	`""`
`Attributes` Additional HTML attributes to apply to the header	`templ.Attributes`	`nil`

Title

Name	Type	Default
`ID` Unique identifier for the title element	`string`	`""`
`Class` Additional CSS classes to apply to the title	`string`	`""`
`Attributes` Additional HTML attributes to apply to the title	`templ.Attributes`	`nil`

Description

Name	Type	Default
`ID` Unique identifier for the description element	`string`	`""`
`Class` Additional CSS classes to apply to the description	`string`	`""`
`Attributes` Additional HTML attributes to apply to the description	`templ.Attributes`	`nil`

Footer

Name	Type	Default
`ID` Unique identifier for the footer element	`string`	`""`
`Class` Additional CSS classes to apply to the footer	`string`	`""`
`Attributes` Additional HTML attributes to apply to the footer	`templ.Attributes`	`nil`

Close

Name	Type	Default
`ID` Unique identifier for the close button	`string`	`""`
`Class` Additional CSS classes to apply to the close button	`string`	`""`
`Attributes` Additional HTML attributes to apply to the close button	`templ.Attributes`	`nil`
`For` ID of the drawer to close (defaults to closest drawer if empty)	`string`	`""`

Menu

Getting Started

Components

Drawer

Account

Installation

Examples

Top Drawer

Right Drawer

Bottom Drawer

Left Drawer

API Reference

Trigger

Content

Header

Title

Description

Footer

Close