Drawer

Designer doc
Drawer slides in from the side of the screen to display additional content or options, often used for navigation, filters, or settings, without taking the user away from the current page or context

Example

Basic Usage
Open drawer
View code
Placements
By default, Drawer shows on the right. To customize it, you can specify placement prop like example below.
Drawer placement
Open drawer
View code
Width and height
You can specify a number on basis prop to set the width (if placement is Left or Right) or height (if placement is Top or Bottom). By default, basis is 480 (pixels).
Alternatively, you can specify the style directly throud inline style or css. However, note that this prop is also used for sliding animation. For example, if you want to set the width as 50vw, you can do so by specifying the style manually and set basis to window.innerWidth/2.
Basis 240
Half-screen drawer
View code
Content height
Whether placing the DrawerActions on the bottom can be done by specifying DrawerContent’s grow prop - when true, DrawerContent will fill the empty space and push down DrawerActions. This prop is true by default.
Open drawer
View code
Nested
You can render a Drawer inside another to achieve nested Drawer. By default, the child Drawer will be rendered on top (overlap) of the parent.
Nested drawer
View code
If you want to make the parent shifted a little bit when the child opens like in Ant Design multi-drawer, you do so by passing a style to the parent.
Note that Drawer added extra padding by 200px and adjusted the position. This is to avoid an empty gap during animations. In specific case below, the normal one is right: -200px, while right: 0px is to slightly shift to the left.
Nested drawer
View code
Stack Nested
You can also render the child Drawer next to the parent instead of overlapping it by specifying stack prop to true. With this option, the child Drawer will also be rendered without any overlay.
In example below, Child is a separate component. Since Drawer unmounts the content after close, Child’s isOpen state will be gone automatically when Parent closes.
Stack drawer
View code
Animations
To disable animation, you can specify prop immediate to true.
Open immediate
View code
Restrain dismissal
To restrain dismissal by clicking the overlay or pressing the escape key, you can specify prop restrainDismissal to true.
Open drawer
View code
Keeping Background Interactive
You can specify showOverlay prop to false so that you can still interact with the background. This prop will also disable the focus-lock and omit some modal aria attributes.
Toggle drawer
View code
Non-modal drawer
You can specify showOverlay prop to false and container prop to null or an HTML element so that you can mount the drawer with your primary content page.
Home
Login
CityDescriptionAuthor
MervinburghEligendi omnis quisquam quisquam. Nihil dolor voluptatibus velit nobis culpa. Eos reprehenderit in nisi et qui. Odio et inventore eligendi in. Harum sit odio quia vitae provident quo provident. Harum ullam pariatur quos est quod. Ea quisquam esse quia expedita commodi autem. Ut exercitationem doloribus harum. Sunt omnis et accusantium et quia quos sequi molestiae. Necessitatibus molestiae placeat saepe eligendi. Excepturi et laudantium fuga similique fugit corporis voluptatem dolores esse. Et sint magnam aut atque dolores maiores incidunt. Laborum facere quia deleniti dolorem quibusdam. Veniam perspiciatis et nisi aut corporis laboriosam. Est soluta accusamus officiis ut excepturi. Libero ut qui quo fuga enim. Non voluptas quia vitae ipsam voluptas necessitatibus et. Dolores sunt non explicabo. Rerum nesciunt et sint est asperiores sit. Mollitia enim iste molestias nesciunt minima.Cremin
PowlowskilandEligendi voluptates iste eius iure commodi molestiae. Voluptas quo ex reprehenderit ipsa incidunt corporis vel in. Nihil iste asperiores consequatur ex quidem omnis. Deserunt ipsa eligendi. Nostrum in omnis labore. Nisi officiis excepturi doloremque nam. Odit labore magni rerum quia praesentium distinctio. Nulla exercitationem omnis illum. Natus eum cum ipsam consequatur ex accusamus ipsum quam. Inventore laboriosam deleniti omnis occaecati culpa culpa occaecati nemo. Doloribus expedita et ut quia ut nostrum ducimus occaecati veniam. Exercitationem voluptatibus error quaerat porro error sint aut aliquid qui. Minus officiis neque dolorem animi maiores et aliquid. Beatae et molestiae consequatur sed rerum qui voluptates unde. Explicabo accusantium exercitationem illum. Et similique illo blanditiis et facere rem quod molestias ab. Impedit aliquam quo vel dolorem consequatur. Consequatur quis nobis nemo asperiores nam ea aut consectetur. Corrupti necessitatibus quas optio ea odio sit odio. Id error ut dicta aut qui qui vel voluptatum. Ipsum molestiae inventore placeat nesciunt. Laboriosam facere odio beatae nobis vero quia.Schuster
TabithasideVitae atque eos. In vitae nihil accusamus natus et quia dolores. Dolores vel quis totam. Voluptas consequatur expedita omnis laudantium recusandae error culpa nihil. Quis porro voluptatem vel. Libero fugiat doloremque deserunt quidem totam aperiam tempore. Reprehenderit rem cumque quia delectus perspiciatis sunt et. Et officia repellat. Assumenda excepturi sunt et aut corporis cumque quos distinctio. Quia autem consectetur. Nemo molestiae nisi temporibus soluta velit illo. Aut sit id quia expedita nulla. Amet sed esse aut doloribus dolores ut ipsum. Nobis sint non sunt fuga laudantium ipsam quas quos ipsam. Quae dolores et quia explicabo ducimus labore ipsa consequatur. Voluptate ipsa quis corporis laboriosam voluptatibus vel ut non fuga. Consequatur sed atque repellendus doloribus iusto autem. Aspernatur sit laudantium. Sapiente deleniti nisi ipsam quibusdam aspernatur quibusdam. Dolore dignissimos id porro. Velit eveniet consectetur culpa delectus. Et nobis et rerum accusantium repudiandae ut ab. Vel et error asperiores dolores ut in. Quia numquam voluptatibus odit in.Feeney
ElisabethburyVeniam in commodi voluptas consequatur voluptatibus consequatur dolorem. Voluptatum neque unde mollitia iusto nostrum exercitationem. Reprehenderit accusantium quo necessitatibus et sit tenetur consequuntur. Omnis debitis quae autem quo ut. Omnis officiis qui impedit aliquid a aut et cum officiis. Praesentium non quasi voluptatem repellat. Quidem fugiat et nulla ratione quia quo mollitia minima sit. Quisquam vitae consequatur similique dicta commodi tempora. Officiis et commodi ex ut. Similique et tempora delectus sunt veniam distinctio dolore. Quam saepe qui. Recusandae quos officia. Hic necessitatibus iste. Et harum alias sit deleniti. Qui velit explicabo ab nihil voluptate aut quis ut vero. Accusantium rem et eaque soluta excepturi et occaecati est culpa. Quo suscipit aliquid aliquid voluptates reprehenderit in facere reprehenderit. Ea et aut itaque totam. Est ut ullam quidem saepe ad deleniti quia veniam suscipit. Voluptas esse aut est qui id. A et nihil quo dolore quisquam. Excepturi ullam maxime. Suscipit sunt ut id. Commodi architecto error soluta consectetur quisquam cum. Numquam quas minima vitae quod culpa natus.Murphy
View code
Top and Bottom Shadows
When the content overflows, shadows will appear if DrawerContent is scrollable to top or bottom. Internally, it uses IntersectionObserver instead of scroll listener, so that it can also handle content size changes.
You can use EllipsisTooltip if the title is very long.
Open drawer
View code

Accessibility

All aria attributes and keyboard interactions (Escape to close) are based on WAI-ARIA Dialog (Modal) pactices.
When a Drawer opens, it traps the focus and prevent body scrolling. However, when a drawer is nested and stacked, it won’t create another focus trap. Props disableFocusLock and disableScrollLock can be specified to override these default behaviours.
After close, Drawer will automatically return the focus back to the last focused element before it opens. This returning focus target is overridable by specifying returnFocusTo prop.

References

API

Drawer
Prop nameTypeDefaultDescription
asany
Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.
autoFocusboolean
basisnumber
containerHTMLElement
disableFocusLockboolean
disableScrollLockboolean
elevationLevelnumber
immediateboolean
initialIsOpenboolean
isOpenboolean
onClose() => void
onOutsideClickMouseEventHandler<HTMLDivElement>
placementDrawerPlacements
restrainDismissalboolean
returnFocusToElement
showOverlayboolean
stackboolean
DrawerActions
Prop nameTypeDefaultDescription
asany
Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.
DrawerBox
Prop nameTypeDefaultDescription
asany
Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.
autoFocusbooleantrue
disableFocusLockboolean
disableScrollLockboolean
restrainDismissalboolean
DrawerClose
Prop nameTypeDefaultDescription
asany
Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.
colorTypeColorTypesneuFore2nd
Set color based on theme. If color is specified, that prop is used instead of this.
disabledboolean
Equivalent to button's disabled property.
keyboardClickKeysstring[]
loadingboolean
onBlurFocusEventHandler<HTMLDivElement>
onClickMouseEventHandler<HTMLDivElement>
onKeyDownKeyboardEventHandler<HTMLDivElement>
onKeyUpKeyboardEventHandler<HTMLDivElement>
onMouseDownMouseEventHandler<HTMLDivElement>
onMouseLeaveMouseEventHandler<HTMLDivElement>
onMouseUpMouseEventHandler<HTMLDivElement>
onReleaseEventHandler<SyntheticEvent<HTMLDivElement, Event>>
Callback that's triggered after click i.e. mouseup and keyup of enter or space.
onTouchEndTouchEventHandler<HTMLDivElement>
onTouchStartTouchEventHandler<HTMLDivElement>
radiusstring
sizeIconButtonSizes
tooltipReactNode
tooltipPropsOmit<TooltipProps, "title" | "children">
variantIconButtonVariants
DrawerContent
Prop nameTypeDefaultDescription
asany
Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.
growbooleantrue
DrawerOverlay
Prop nameTypeDefaultDescription
asany
Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.
basisnumber480
containerHTMLElement
elevationLevelnumber3
immediateboolean
initialIsOpenbooleantrue
isOpenboolean
onClose() => void
onOutsideClickMouseEventHandler<HTMLDivElement>
placementDrawerPlacementsright
restrainDismissalboolean
returnFocusToElement
showOverlaybooleantrue
stackboolean
DrawerTitle
Prop nameTypeDefaultDescription
asany
Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.
    Example
    Example
    Basic Usage
    Basic Usage
    Placements
    Placements
    Width and height
    Width and height
    Content height
    Content height
    Nested
    Nested
    Stack Nested
    Stack Nested
    Animations
    Animations
    Restrain dismissal
    Restrain dismissal
    Keeping Background Interactive
    Keeping Background Interactive
    Non-modal drawer
    Non-modal drawer
    Top and Bottom Shadows
    Top and Bottom Shadows
    Accessibility
    Accessibility
    References
    References
    API
    API
    Drawer
    Drawer
    DrawerActions
    DrawerActions
    DrawerBox
    DrawerBox
    DrawerClose
    DrawerClose
    DrawerContent
    DrawerContent
    DrawerOverlay
    DrawerOverlay
    DrawerTitle
    DrawerTitle
Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.

Copyright © 2018-2025 Sea Labs