Developer mode
Opens components on the React tab by default.
Your bookmarks

Drawer

Also known as sidebar

Wraps navigation or other content in a sidebar.

When you have long structured navigation, screen-specific help, or other similar content, you might want to keep it out of sight at first. Drawers help you use progressive disclosure to reveal relevant information at the right time.

Drawers keep your content easily accessible but out of sight. Users slide it in and out of the screen whenever they need. They keep the context of the current screen and don’t have their main flow interrupted.

For organizing navigation, consider a link list.

Component status

Figma
On hold
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released
Overlay: keeps the overall context present but less important; close: allows users to close the drawer; content: navigation or other content to hide and show.

Guidelines

Use for short related content

Drawers are good for short pieces of content that are related to the main screen but not a part of it. Examples include:

  • Navigation
  • Context-sensitive help
  • Notifications
  • Simple forms or settings

Drawers also work well on small screens for things like menus that would ordinarily be horizontal. When there’s not enough space for such things, use a drawer to keep them easily accessible but initially hidden.

Make trigger clear

Make it clear how users can open the drawer and don’t surprise them by opening it when they wouldn’t expect it. Use common patterns like a menu icon to make it clear what is possible.

import Button from "@kiwicom/orbit-components/lib/Button";
import Drawer from "@kiwicom/orbit-components/lib/Drawer";
import LinkList from "@kiwicom/orbit-components/lib/LinkList";
import TextLink from "@kiwicom/orbit-components/lib/TextLink";
import MenuHamburger from "@kiwicom/orbit-components/lib/icons/MenuHamburger";
() => {
  const [showDrawer, setShowDrawer] = React.useState(false)
  return (
    <>
      {showDrawer && (
        <Drawer
          onClose={() => {
            setShowDrawer(false)
          }}
          shown={showDrawer}
        >
          <LinkList>
            <TextLink
              href="https://orbit.kiwi/components/drawer/"
              external
              type="secondary"
            >
              Drawer guidelines
            </TextLink>
            <TextLink
              href="https://orbit.kiwi/components/drawer/react/"
              external
              type="secondary"
            >
              Drawer React API
            </TextLink>
            <TextLink
              href="https://github.com/kiwicom/orbit/tree/master/packages/orbit-components/src/Drawer"
              external
              type="secondary"
            >
              Drawer on GitHub
            </TextLink>
          </LinkList>
        </Drawer>
      )}
      <Button
        iconLeft={<MenuHamburger />}
        title="Open menu"
        onClick={() => {
          setShowDrawer(true)
        }}
      />
    </>
  )
}

Allow users to close

Users want to feel in control of their actions. If the trigger is clear, drawers don’t interrupt a user’s flow, but it’s still important users know how to get back to what they were doing. Make sure users feel in control by offering them a clear option to close the drawer.

Drawers should generally include a close button in the upper right and often the option to close the modal by clicking the overlay.

Maintain state

Drawers are easy to open and close. If the content might change (such as a form or which help article is displayed), keep the most recent state active even on open and close. 

Reset the state to the default only on an intentional user action, not just because they closed the drawer. Users expect to be able to easily return to where they were.

import Button from "@kiwicom/orbit-components/lib/Button";
import ButtonLink from "@kiwicom/orbit-components/lib/ButtonLink";
import Drawer from "@kiwicom/orbit-components/lib/Drawer";
import Heading from "@kiwicom/orbit-components/lib/Heading";
import Stack from "@kiwicom/orbit-components/lib/Stack";
import Text from "@kiwicom/orbit-components/lib/Text";
import Tile from "@kiwicom/orbit-components/lib/Tile";
import QuestionCircle from "@kiwicom/orbit-components/lib/icons/QuestionCircle";
() => {
  const [showDrawer, setShowDrawer] = React.useState(false)
  const [article, setArticle] = React.useState("priority")
  let title = ""
  let content = ""
  let tiles
  const cabinTile = (
    <Tile
      title="Cabin baggage"
      description="Small baggage you take into the plane with you"
      onClick={() => setArticle("cabin")}
    />
  )
  const transferTile = (
    <Tile
      title="Self-transfer"
      description="How to get quickly to the next part of your trip"
      onClick={() => setArticle("transfer")}
    />
  )
  const priorityTile = (
    <Tile
      title="Priority Boarding"
      description="Jump to the front of the line"
      onClick={() => setArticle("priority")}
    />
  )

  switch (article) {
    case "cabin":
      title = "Cabin baggage"
      content =
        "Cabin baggage is mall baggage you take into the plane with you."
      tiles = (
        <Stack>
          {transferTile}
          {priorityTile}
        </Stack>
      )
      break

    case "transfer":
      title = "Self-transfer"
      content =
        "To transfer fast, purchase priority boarding and only take cabin baggage with you so you don't have to pick up any checked baggage"
      tiles = (
        <Stack>
          {cabinTile}
          {priorityTile}
        </Stack>
      )
      break

    default:
      title = "Priority boarding"
      content = "Priority Boarding will get you where you need to go."
      tiles = (
        <Stack>
          {transferTile}
          {cabinTile}
        </Stack>
      )
  }

  return (
    <>
      {showDrawer && (
        <Drawer
          title="Help"
          onClose={() => {
            setShowDrawer(false)
          }}
          shown={showDrawer}
        >
          <Stack>
            <Stack>
              <Heading as="h3" type="title3">
                {title}
              </Heading>
              <Text>{content}</Text>
            </Stack>
            <Heading as="h4" type="title3">
              Related articles
            </Heading>
            <Text type="secondary">Click a tile to change the state.</Text>
            {tiles}
          </Stack>
        </Drawer>
      )}
      <Stack flex>
        <Button type="secondary">Add priority boarding</Button>
        <ButtonLink
          iconLeft={<QuestionCircle />}
          title="Open help"
          circled
          onClick={() => {
            setShowDrawer(true)
          }}
        />
      </Stack>
    </>
  )
}

Related components

Modal

Drawers present extra information or actions slightly outside the main context without interrupting the main user flow. To force users to complete an action before continuing, use a modal.

Dialog

Drawers can contain lots of content. For small bits of information focused on a single action, consider a dialog.

Popover

Drawers present larger amounts of content or options slightly outside the main context. For small content or few options closer to the original context, consider a popover.