Drawer - Intelligence Community Design System

Show navigation section

Component demo

Interactive example

Add to order

Web component

React

Show full code

<divstyle="position: relative;height:100%;width:100%;">
<ic-drawer
heading="Roasted coffee"
message="Contrary to popular belief, light roast coffee has more caffeine than dark roast coffee. The longer coffee is roasted, the more caffeine is lost through the cooking of the bean. Light roast coffee is a light brown colour and has no oil on the surface of the beans, and these coffees typically have a crisp acidity, a mellow body, and bright flavours."
boundary="parent"
>
<svg
slot="heading-adornment"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
height="1.5rem"
width="1.5rem"
>
<path
d="M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z"
/>
</svg>
<ic-buttonslot="actions">Add to order</ic-button>
</ic-drawer>
</div>

<divstyle={{ position:"relative", height:"100%", width:"100%"}}>
<IcDrawer
heading="Roasted coffee"
message="Contrary to popular belief, light roast coffee has more caffeine than dark roast coffee. The longer coffee is roasted, the more caffeine is lost through the cooking of the bean. Light roast coffee is a light brown colour and has no oil on the surface of the beans, and these coffees typically have a crisp acidity, a mellow body, and bright flavours."
boundary="parent"
>
<SlottedSVG
path={mdiCoffee}
slot="heading-adornment"
viewBox="0 0 24 24"
height="1.5rem"
width="1.5rem"
/>
<IcButtonslot="actions">Add to order</IcButton>
</IcDrawer>
</div>

Drawer details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property boundary Attribute boundary	The area within which the drawer should be contained. When set to "parent", the value of the parent element's`position` CSS property must not be "static". type: IcDrawerBoundary - "parent" \| "viewport"	"viewport"
Property chevronButtonAriaLabel Attribute chevron-button-aria-label	The aria-label of the chevron button (displayed when`trigger="chevron"` ). This will default to "Open drawer" / "Close drawer". type: string - string \| undefined
Property closeButtonAriaLabel Attribute close-button-aria-label	The aria-label of the X (close) button (displayed when`trigger="controlled"` ). This will default to "Close drawer". type: string - string \| undefined
Property closeOnBackdropClick Attribute close-on-backdrop-click	If`true` , the drawer will close when the backdrop is clicked. type: boolean	true
Property expanded Attribute expanded	If`true` , the drawer will display in an expanded state. type: boolean	false
Property heading Attribute heading	The heading of the drawer. This is required, unless a slotted heading is used. type: string - string \| undefined
Property hideCloseButton Attribute hide-close-button	If set to`true` , the X (close) button which is displayed when`trigger` is set to "controlled" will be hidden. type: boolean	false
Property message Attribute message	The body content of the drawer. type: string - string \| undefined
Property position Attribute position	The position of the drawer. type: IcPosition - "bottom" \| "left" \| "right" \| "top"	"right"
Property size Attribute size	The size of the expanded drawer. type: IcSizes - "large" \| "medium" \| "small"	"medium"
Property theme Attribute theme	Sets the drawer to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode - "dark" \| "inherit" \| "light"	"inherit"
Property trigger Attribute trigger	The method in which the drawer is expanded. type: "chevron" \| "controlled"	"chevron"

Property

boundary

Attribute

boundary

The area within which the drawer should be contained. When set to "parent", the value of the parent element'sposition CSS property must not be "static".

type: IcDrawerBoundary - "parent" | "viewport"

Default: "viewport"

Property

chevronButtonAriaLabel

Attribute

chevron-button-aria-label

The aria-label of the chevron button (displayed whentrigger="chevron" ). This will default to "Open drawer" / "Close drawer".

type: string - string | undefined

Property

closeButtonAriaLabel

Attribute

close-button-aria-label

The aria-label of the X (close) button (displayed whentrigger="controlled" ). This will default to "Close drawer".

type: string - string | undefined

Property

closeOnBackdropClick

Attribute

close-on-backdrop-click

Iftrue , the drawer will close when the backdrop is clicked.

type: boolean

Default: true

Property

expanded

Attribute

expanded

Iftrue , the drawer will display in an expanded state.

type: boolean

Default: false

Property

heading

Attribute

heading

The heading of the drawer. This is required, unless a slotted heading is used.

type: string - string | undefined

Property

hideCloseButton

Attribute

hide-close-button

If set totrue , the X (close) button which is displayed whentrigger is set to "controlled" will be hidden.

type: boolean

Default: false

Property

message

Attribute

message

The body content of the drawer.

type: string - string | undefined

Property

position

Attribute

position

The position of the drawer.

type: IcPosition - "bottom" | "left" | "right" | "top"

Default: "right"

Property

size

Attribute

size

The size of the expanded drawer.

type: IcSizes - "large" | "medium" | "small"

Default: "medium"

Property

theme

Attribute

theme

Sets the drawer to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light"

Default: "inherit"

Property

trigger

Attribute

trigger

The method in which the drawer is expanded.

type: "chevron" | "controlled"

Default: "chevron"

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Name	Description
Slot actions	Content will be rendered in the action area at the bottom of the drawer.
Slot heading	Content will be rendered in the title area, in place of the heading.
Slot heading-adornment	Content will be rendered in the title area, to the left of the heading.

CSS Custom Properties

Name	Description
--ic-drawer-height	the height of the expanded top or bottom drawer. The unit for this value must be either REM or PX.
--ic-drawer-width	the width of the expanded left or right drawer. The unit for this value must be either REM or PX.
--ic-z-index-drawer	z-index of drawer.

--ic-drawer-height the height of the expanded top or bottom drawer. The unit for this value must be either REM or PX.

--ic-drawer-width the width of the expanded left or right drawer. The unit for this value must be either REM or PX.

--ic-z-index-drawer z-index of drawer.

Events

All components also accept native events supported by the DOM, such as onClick and onKeyDown .

Name	Description	Signature
Web component icDrawerExpanded React onIcDrawerExpanded	Emitted when the drawer is expanded and collapsed.	IcDrawerExpandedDetail

Web component

icDrawerExpanded

React

onIcDrawerExpanded

Emitted when the drawer is expanded and collapsed.

IcDrawerExpandedDetail

Variants

The drawer components in the following code examples have theboundary prop set to"parent" so that they are contained within each component preview. To anchor the drawer to the viewport instead, set theboundary prop to"viewport" .

Position

Interactive example

Add to order

Web component

React

Show full code

<divstyle="position: relative;height:100%;width:100%;">
<ic-drawer
heading="Roasted coffee"
message="Contrary to popular belief, light roast coffee has more caffeine than dark roast coffee. The longer coffee is roasted, the more caffeine is lost through the cooking of the bean. Light roast coffee is a light brown colour and has no oil on the surface of the beans, and these coffees typically have a crisp acidity, a mellow body, and bright flavours."
boundary="parent"
position="top"
>
<svg
slot="heading-adornment"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
height="1.5rem"
width="1.5rem"
>
<path
d="M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z"
/>
</svg>
<ic-buttonslot="actions">Add to order</ic-button>
</ic-drawer>
</div>

<divstyle={{ position:"relative", height:"100%", width:"100%"}}>
<IcDrawer
heading="Roasted coffee"
message="Contrary to popular belief, light roast coffee has more caffeine than dark roast coffee. The longer coffee is roasted, the more caffeine is lost through the cooking of the bean. Light roast coffee is a light brown colour and has no oil on the surface of the beans, and these coffees typically have a crisp acidity, a mellow body, and bright flavours."
boundary="parent"
position="top"
>
<SlottedSVG
path={mdiCoffee}
slot="heading-adornment"
viewBox="0 0 24 24"
height="1.5rem"
width="1.5rem"
/>
<IcButtonslot="actions">Add to order</IcButton>
</IcDrawer>
</div>

Size

Interactive example

Add to order

Web component

React

Show full code

<divstyle="position: relative;height:100%;width:100%;">
<ic-drawer
heading="Roasted coffee"
message="Contrary to popular belief, light roast coffee has more caffeine than dark roast coffee. The longer coffee is roasted, the more caffeine is lost through the cooking of the bean. Light roast coffee is a light brown colour and has no oil on the surface of the beans, and these coffees typically have a crisp acidity, a mellow body, and bright flavours."
boundary="parent"
size="small"
>
<svg
slot="heading-adornment"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
height="1.5rem"
width="1.5rem"
>
<path
d="M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z"
/>
</svg>
<ic-buttonslot="actions">Add to order</ic-button>
</ic-drawer>
</div>

<divstyle={{ position:"relative", height:"100%", width:"100%"}}>
<IcDrawer
heading="Roasted coffee"
message="Contrary to popular belief, light roast coffee has more caffeine than dark roast coffee. The longer coffee is roasted, the more caffeine is lost through the cooking of the bean. Light roast coffee is a light brown colour and has no oil on the surface of the beans, and these coffees typically have a crisp acidity, a mellow body, and bright flavours."
boundary="parent"
size="small"
>
<SlottedSVG
path={mdiCoffee}
slot="heading-adornment"
viewBox="0 0 24 24"
height="1.5rem"
width="1.5rem"
/>
<IcButtonslot="actions">Add to order</IcButton>
</IcDrawer>
</div>

Controlled trigger

Interactive example

Find out more about roasted coffee

Add to order

Web component

React

Show full code

<divstyle="position: relative;height:100%;width:100%;">
<ic-buttonstyle="margin:1rem;"onclick="toggleDrawer()">Find out more about roasted coffee</ic-button>
<ic-drawer
heading="Roasted coffee"
message="Contrary to popular belief, light roast coffee has more caffeine than dark roast coffee. The longer coffee is roasted, the more caffeine is lost through the cooking of the bean. Light roast coffee is a light brown colour and has no oil on the surface of the beans, and these coffees typically have a crisp acidity, a mellow body, and bright flavours."
boundary="parent"
trigger="controlled"
id="roasted-coffee-drawer"
>
<svg
slot="heading-adornment"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
height="1.5rem"
width="1.5rem"
>
<path
d="M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z"
/>
</svg>
<ic-buttonslot="actions">Add to order</ic-button>
</ic-drawer>
</div>

<divstyle={{ position:"relative", height:"100%", width:"100%"}}>
<IcButtonstyle={{ margin:"1rem"}}onClick={toggleDrawer}>Find out more about roasted coffee</IcButton>
<IcDrawer
heading="Roasted coffee"
message="Contrary to popular belief, light roast coffee has more caffeine than dark roast coffee. The longer coffee is roasted, the more caffeine is lost through the cooking of the bean. Light roast coffee is a light brown colour and has no oil on the surface of the beans, and these coffees typically have a crisp acidity, a mellow body, and bright flavours."
boundary="parent"
trigger="controlled"
expanded={drawerExpanded}
onIcDrawerExpanded={handleDrawerExpanded}
>
<SlottedSVG
path={mdiCoffee}
slot="heading-adornment"
viewBox="0 0 24 24"
height="1.5rem"
width="1.5rem"
/>
<IcButtonslot="actions">Add to order</IcButton>
</IcDrawer>
</div>

Slotted content

Interactive example

Roasted coffee

Contrary to popular belief, light roast coffee has more caffeine than dark roast coffee. The longer coffee is roasted, the more caffeine is lost through the cooking of the bean. Light roast coffee is a light brown colour and has no oil on the surface of the beans, and these coffees typically have a crisp acidity, a mellow body, and bright flavours.

Add to order

Web component

React

Show full code

<divstyle="position: relative;height:100%;width:100%;">
<ic-drawerboundary="parent">
<svg
slot="heading-adornment"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
height="1.5rem"
width="1.5rem"
>
<path
d="M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z"
/>
</svg>
<ic-typographyslot="heading"variant="h4">
<h4>Roasted coffee</h4>
</ic-typography>
<ic-typographyslot="message">
<p>Contrary to popular belief, light roast coffee has more <ic-linkhref="#">caffeine</ic-link> than dark roast coffee. The longer coffee is roasted, the more caffeine is lost through the cooking of the bean. Light roast coffee is a light brown colour and has no oil on the surface of the beans, and these coffees typically have a crisp acidity, a mellow body, and bright flavours.</p>
</ic-typography>
<ic-buttonslot="actions">Add to order</ic-button>
</ic-drawer>
</div>

<divstyle={{ position:"relative", height:"100%", width:"100%"}}>
<IcDrawerboundary="parent">
<SlottedSVG
path={mdiCoffee}
slot="heading-adornment"
viewBox="0 0 24 24"
height="1.5rem"
width="1.5rem"
/>
<IcTypographyslot="heading"variant="h4">
<h4>Roasted coffee</h4>
</IcTypography>
<IcTypographyslot="message">
<p>
        Contrary to popular belief, light roast coffee has more <IcLinkhref="#">caffeine</IcLink> than dark roast coffee. The longer coffee is roasted, the more caffeine is lost through the cooking of the bean. Light roast coffee is a light brown colour and has no oil on the surface of the beans, and these coffees typically have a crisp acidity, a mellow body, and bright flavours.
</p>
</IcTypography>
<IcButtonslot="actions">Add to order</IcButton>
</IcDrawer>
</div>

Last reviewed 24 February 2026 .