Drawer
Default
Section titled “Default”The most basic setup for a drawer.
Drawer Content
This drawer uses both the built-in close button (X) and a custom close button:
Close Drawer
<fulcrum-element-drawer id="drawer1" cloak>
<div style="padding: 1rem;">
<h2>Drawer Content</h2>
<p>
This drawer uses both the built-in close button (X) and a custom close
button:
</p>
<fulcrum-element-dialog-close>
Close Drawer
</fulcrum-element-dialog-close>
</div>
</fulcrum-element-drawer>Side Drawer
Section titled “Side Drawer”Set the align prop to "right" or "left" to change the alignment of the drawer.
Drawer Content
This drawer uses both the built-in close button (X) and a custom close button:
Close Drawer
<fulcrum-element-drawer id="drawer2" align="left" cloak>
<div style="padding: 2rem;">
<h2 class="text-black">Drawer Content</h2>
<p>
This drawer uses both the built-in close button (X) and a custom close
button:
</p>
<fulcrum-element-dialog-close>
Close Drawer
</fulcrum-element-dialog-close>
</div>
</fulcrum-element-drawer>Form Integration
Section titled “Form Integration”Integrate forms seamlessly within the drawer. You might want to close the drawer when the form is submitted.
<fulcrum-element-drawer align="right" id="settings-drawer">
<form style="padding: 2rem;">
<h3>Settings</h3>
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username" />
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
</div>
<div style="margin-top: 1rem;">
<button type="submit">Save</button>
<button
type="button"
onclick="document.getElementById('settings-drawer').close()"
>
Cancel
</button>
</div>
</form>
</fulcrum-element-drawer>Non-Modal Drawer
Section titled “Non-Modal Drawer”By default, the drawer is modal, meaning it blocks interaction with the underlying content. To create a non-modal drawer, set the modal prop to false.
Drawer Content
This drawer uses both the built-in close button (X) and a custom close button:
Close Drawer
<fulcrum-element-drawer
id="drawer-non-modal"
align="right"
cloak
modal="false"
>
<div style="padding: 2rem;">
<h2 class="text-black">Drawer Content</h2>
<p>
This drawer uses both the built-in close button (X) and a custom close
button:
</p>
<fulcrum-element-dialog-close>
Close Drawer
</fulcrum-element-dialog-close>
</div>
</fulcrum-element-drawer>Component Properties
Section titled “Component Properties”Core Properties
Section titled “Core Properties”| Property | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Controls the visibility of the drawer |
modal | boolean | true | Whether drawer blocks interaction with underlying content |
show-close | boolean | true | Show/hide the close button in the drawer header |
align | string | "bottom" | Position of the drawer: "left", "right", "top", "bottom" |
CSS Custom Properties
Section titled “CSS Custom Properties”The drawer component uses CSS custom properties for extensive customization:
Size and Positioning
Section titled “Size and Positioning”| Property | Default | Description |
|---|---|---|
--drawer-width | 448px | Width of left/right drawers |
--drawer-height | 100vh (sides), 400px (top/bottom) | Height of drawers |
Visual Styling
Section titled “Visual Styling”| Property | Default | Description |
|---|---|---|
--drawer-background | hsl(var(--background)) | Background color of the drawer |
--drawer-border | hsl(var(--border)) | Border color around the drawer |
--drawer-overlay | rgba(0, 0, 0, 0.8) | Backdrop overlay color (modal only) |
--drawer-animation | 300ms ease-in-out | Slide animation duration and easing |
Styling Examples
Section titled “Styling Examples”Custom Sizes and Colors
Section titled “Custom Sizes and Colors”<fulcrum-element-drawer
align="right"
style="
--drawer-width: 500px;
--drawer-background: #f8f9fa;
--drawer-border: #dee2e6;
--drawer-animation: 200ms cubic-bezier(0.4, 0, 0.2, 1);
"
>
<!-- Content -->
</fulcrum-element-drawer>Mobile-Optimized Bottom Sheet
Section titled “Mobile-Optimized Bottom Sheet”<fulcrum-element-drawer
align="bottom"
style="
--drawer-height: min(70vh, 500px);
--drawer-background: white;
--drawer-border: #e5e7eb;
--drawer-animation: 250ms ease-out;
"
>
<!-- Content -->
</fulcrum-element-drawer>JavaScript API
Section titled “JavaScript API”Methods
Section titled “Methods”| Method | Description |
|---|---|
open() | Open the drawer programmatically |
close() | Close the drawer programmatically |
Events
Section titled “Events”The drawer dispatches custom events that bubble up:
| Event | Detail | Description |
|---|---|---|
drawer-open | { dialog } | Fired when drawer opens |
drawer-close | { dialog } | Fired when drawer closes |
drawer-cancel | { dialog } | Fired when drawer is cancelled (ESC key) |
JavaScript Usage
Section titled “JavaScript Usage”// Get drawer element
const drawer = document.querySelector("fulcrum-element-drawer");
// Open/close programmatically
drawer.open();
drawer.close();
// Listen to events
drawer.addEventListener("drawer-open", (event) => {
console.log("Drawer opened");
});
drawer.addEventListener("drawer-close", (event) => {
console.log("Drawer closed");
});
// Toggle based on current state
function toggleDrawer() {
if (drawer._open) {
drawer.close();
} else {
drawer.open();
}
}Accessibility Features
Section titled “Accessibility Features”The drawer component includes comprehensive accessibility support:
Keyboard Navigation
Section titled “Keyboard Navigation”- Tab: Navigate through interactive elements within the drawer
- Escape: Close the drawer (when dismissible)
- Enter/Space: Activate focused elements
Screen Reader Support
Section titled “Screen Reader Support”- Proper ARIA roles and labels
- Focus management and trapping (modal mode)
- State changes are announced to assistive technologies
Focus Management
Section titled “Focus Management”- Focus is trapped within modal drawers
- Focus returns to trigger element when closed
Responsive Design
Section titled “Responsive Design”The drawer component works seamlessly across different screen sizes:
Mobile Considerations
Section titled “Mobile Considerations”<!-- Mobile-first approach -->
<fulcrum-element-drawer
align="bottom"
class="mobile-drawer"
style="
--drawer-height: 50vh;
--drawer-animation: 200ms ease-out;
"
>
<!-- Mobile-optimized content -->
</fulcrum-element-drawer>
<style>
@media (min-width: 768px) {
.mobile-drawer {
--drawer-width: 400px;
--drawer-height: 100vh;
/* Note: This would require JavaScript to change the align attribute */
}
}
</style>Integration Patterns
Section titled “Integration Patterns”Form Integration
Section titled “Form Integration”<fulcrum-element-drawer align="right" id="settings-drawer">
<form style="padding: 1rem;">
<h3>Settings</h3>
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username" />
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
</div>
<div style="margin-top: 1rem;">
<button type="submit">Save</button>
<button
type="button"
onclick="document.getElementById('settings-drawer').close()"
>
Cancel
</button>
</div>
</form>
</fulcrum-element-drawer>Best Practices
Section titled “Best Practices”Performance
Section titled “Performance”- Use CSS transforms for positioning rather than changing layout properties
- Implement lazy loading for drawer content when possible
UX Guidelines
Section titled “UX Guidelines”- Use appropriate animations that respect
prefers-reduced-motion - Ensure touch targets are at least 44px for mobile devices
- Consider the drawer’s impact on the main content flow
Content Organization
Section titled “Content Organization”- Use semantic HTML within drawer content
- Provide clear headings and navigation structure
- Consider the drawer’s role (navigation, complementary content, etc.)
- Ensure content is accessible without the drawer open