# Drawer Drawer slides into view from the edge of the screen to display additional content, navigation, or actions. It keeps the primary interface uncluttered while providing quick access to secondary information. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-drawer--introduction ## Variants documented in Storybook - Drawer Variants: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-drawer--drawer-variants ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Drawer. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Drawer Variants — Top Drawer HTML: ```html
token Top Drawer
Drawer from top
Content from top drawer
``` React: ```jsx import React from 'react'; const DrawerExample1Demo = () => ( <> {/* Variant: Drawer Trigger - Top */} {/* Variant: Drawer Panel - Top */}
token Top Drawer
Drawer from top
Content from top drawer
); export default DrawerExample1Demo; ``` Angular: ```html
token Top Drawer
Drawer from top
Content from top drawer
``` ### 2. Drawer Variants — Right Drawer HTML: ```html
token Right Drawer
Drawer from right
Content from right drawer
``` React: ```jsx import React from 'react'; const DrawerExample2Demo = () => ( <> {/* Variant: Drawer Trigger - Right */} {/* Variant: Drawer Panel - Right */}
token Right Drawer
Drawer from right
Content from right drawer
); export default DrawerExample2Demo; ``` Angular: ```html
token Right Drawer
Drawer from right
Content from right drawer
``` ### 3. Drawer Variants — Bottom Drawer HTML: ```html
token Bottom Drawer
Drawer from bottom
Content from bottom drawer
``` React: ```jsx import React from 'react'; const DrawerExample3Demo = () => ( <> {/* Variant: Drawer Trigger - Bottom */} {/* Variant: Drawer Panel - Bottom */}
token Bottom Drawer
Drawer from bottom
Content from bottom drawer
); export default DrawerExample3Demo; ``` Angular: ```html
token Bottom Drawer
Drawer from bottom
Content from bottom drawer
``` ### 4. Drawer Variants — Left Drawer HTML: ```html
token Left Drawer
Drawer from left
Content from left drawer
``` React: ```jsx import React from 'react'; const DrawerExample4Demo = () => ( <> {/* Variant: Drawer Trigger - Left */} {/* Variant: Drawer Panel - Left */}
token Left Drawer
Drawer from left
Content from left drawer
); export default DrawerExample4Demo; ``` Angular: ```html
token Left Drawer
Drawer from left
Content from left drawer
``` ### 5. Introduction — Introduction HTML: ```html
Components

Drawer

Drawer slides into view from the edge of the screen to display additional content, navigation, or actions. It keeps the primary interface uncluttered while providing quick access to secondary information.

Drawer Component

token Top Drawer
Drawer from top
Content from top drawer
token Right Drawer
Drawer from right
Content from right drawer
token Bottom Drawer
Drawer from bottom
Content from bottom drawer
token Left Drawer
Drawer from left
Content from left drawer

CSS Class Reference

Utility classes for drawer positioning and structure.

Positions

Top Drawer ux4g-drawer-top
Right Drawer ux4g-drawer-right
Bottom Drawer ux4g-drawer-bottom
Left Drawer ux4g-drawer-left

Structure

Overlay ux4g-drawer-overlay
Header ux4g-drawer-header
Body Content ux4g-drawer-body
Footer Actions ux4g-drawer-footer
``` React: ```jsx import React from 'react'; const DrawerExample5Demo = () => ( <>
Components

Drawer

Drawer slides into view from the edge of the screen to display additional content, navigation, or actions. It keeps the primary interface uncluttered while providing quick access to secondary information.

Drawer Component

{/* hidden Panels for Triggers */}
token Top Drawer
Drawer from top
Content from top drawer
token Right Drawer
Drawer from right
Content from right drawer
token Bottom Drawer
Drawer from bottom
Content from bottom drawer
token Left Drawer
Drawer from left
Content from left drawer

CSS Class Reference

Utility classes for drawer positioning and structure.

{/* Position Classes */}

Positions

Top Drawer ux4g-drawer-top
Right Drawer ux4g-drawer-right
Bottom Drawer ux4g-drawer-bottom
Left Drawer ux4g-drawer-left
{/* Structure Classes */}

Structure

Overlay ux4g-drawer-overlay
Header ux4g-drawer-header
Body Content ux4g-drawer-body
Footer Actions ux4g-drawer-footer
); export default DrawerExample5Demo; ``` Angular: ```html
Components

Drawer

Drawer slides into view from the edge of the screen to display additional content, navigation, or actions. It keeps the primary interface uncluttered while providing quick access to secondary information.

Drawer Component

token Top Drawer
Drawer from top
Content from top drawer
token Right Drawer
Drawer from right
Content from right drawer
token Bottom Drawer
Drawer from bottom
Content from bottom drawer
token Left Drawer
Drawer from left
Content from left drawer

CSS Class Reference

Utility classes for drawer positioning and structure.

Positions

Top Drawer ux4g-drawer-top
Right Drawer ux4g-drawer-right
Bottom Drawer ux4g-drawer-bottom
Left Drawer ux4g-drawer-left

Structure

Overlay ux4g-drawer-overlay
Header ux4g-drawer-header
Body Content ux4g-drawer-body
Footer Actions ux4g-drawer-footer
``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.