DrawerNew

Drawer is used to display context-sensitive actions and information. Drawer doesn’t block users from completing their task, like a modal would.

Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
View RTL
<nord-layout>
  <nord-button id="toggle">Toggle drawer</nord-button>
  <nord-drawer slot="drawer">
    <nord-header slot="header">
      <h3 class="n-typescale-l n-truncate">Drawer header</h3>
      <nord-button slot="end" id="close" variant="plain" aria-describedby="close-sidebar" size="s">
        <nord-icon name="interface-close" size="s"></nord-icon>
      </nord-button>
      <nord-tooltip id="close-sidebar">Close</nord-tooltip>
    </nord-header>

    <div class="n-typeset">
      <p>Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit.</p>
    </div>
  </nord-drawer>
</nord-layout>

<script>
  const layout = document.querySelector("nord-layout")
  const drawer = document.querySelector("nord-drawer")
  const toggleButton = document.querySelector("#toggle")
  const closeButton = document.querySelector("#close")

  const hide = () => drawer.remove()
  const show = () => layout.appendChild(drawer)

  closeButton.addEventListener("click", hide)
  toggleButton.addEventListener("click", () => {
    if (drawer.isConnected) {
      hide()
    } else {
      show()
    }
  })
</script>

Properties

PropertyAttributeDescriptionTypeDefault
paddingpadding

Controls the padding of the drawer component.

"m" | "none""m"

Slots

Slot nameDescription
header

Optional slot that holds a header for the drawer.

Default slot

Default slot.

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

PropertyDescriptionDefault
--n-drawer-padding

Controls the padding around the main area (the default slot), using our spacing tokens.

var(--n-space-l)

Dependencies

This component is internally dependent on the following components:

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Do #

  • Use for displaying contextual actions or information. For example, when clicking on a table row.
  • Use when you don’t want to block users from completing their task in the main view of an application.
  • Always include a header that summarizes the actions and information in the drawer.
  • Should be closeable through actions like “Done” and “Close”.

Don’t #

  • Don’t put cards inside the drawer. Consider using the divider component to break up sections instead.
  • Don’t reset the drawer’s state when closed if used for settings or filters. Settings should persist.
  • Don’t open from within another drawer. Only one drawer can be open at a time.
  • Don’t use for presenting a small amount of content or an actions menu, use the popout or dropdown component instead.

Additional considerations #

  • You can customize the width of the component using --n-layout-drawer-inline-size CSS Custom Property that is offered on Layout component.

Integration

For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines

Troubleshooting

If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.

Was this page helpful?

YesNoSend feedback

We use this feedback to improve our documentation.