Skip to main content

Drawer

A drawer is used to expand and collapse content on a page, items in a list or items in supplemental navigation.

Example

Best practices

The possible uses for drawer vary widely. It could be used in supplemental navigation to show/hide sub-navigation. It could be used as part of a refine menu to show that a set of refine items has either been expanded or collapsed. It could also be used within a list or table to show more or fewer items. In general, use to shorten pages and reduce scrolling. A set of content drawers can be paired with heading and hyperlink to expose or hide rich content, such as the info commonly found in FAQ sections. Responsive drawer allows content to remain fully exposed at larger viewports but automatically transforms into a collapsible drawer at smaller viewports where space is at a premium.

Do

  • Drawer can be useful when there are more list items available than can fit in the viewport and you don’t want the user to scroll down and up repeatedly to access all the items.
  • Use when the user will likely focus on only one or a few categories at a time. By hiding most of the content, users can spend their time more efficiently focused on the few topics that matter.
  • It can also be useful when information is restricted to very small spaces, such as on mobile devices. On small screens people often stop scrolling before reaching the end of an extremely long page.
  • Pair pages containing drawers with print functionality that allows all topics to be printed (and without the user having to expand them).
  • Use responsive drawer for scenarios that require content to collapse into a drawer only on smaller screen widths. It can be configured to collapse at any viewport equal to or smaller than VP3.

Don’t

  • Drawers increase the interaction cost by requiring people to decide on topic headers. In many situations when all the page content is relevant to users, it is more advantageous to show all the content at once, even if doing so results in longer pages.
  • Avoid using responsive drawer if the content is intended to be collapsible on VP4 or upwards. Use content drawer instead.

Also known as

Accordion
Expand
Expando

Related

Choice Summary
Content toggle
Refine Menu

Options

  • Responsive: To enable a responsive drawer, add an attribute of data-js-collapse with a value of either vp3, vp2, or vp1. The value correlates to the viewport at which the drawer will collapse.
  • Divider: Add a class of f-divider to include a divider between the drawer label and its contents
  • The drawer can be initialized in either an expanded or collapsed state. To initialize the drawer in a collapsed state, set the aria-expanded attribute to false. To initialize the drawer in an expanded state, set the attribute to true.

Development

  • JavaScript: Scripting documentation defines how to handle this component through JavaScript.
  • Schema definition: The drawer schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Default drawer

<div class="c-drawer">
    <button class="c-glyph" aria-expanded="true" aria-controls="refineDrawer">Drawer label</button>
    <ul id="refineDrawer" data-js-select-type="multi-select" aria-label="Use these links to refine results for this page.">
        <li>
            <a class="c-refine-item" href="#" aria-label="Refine by Item alpha">
                <span aria-hidden="true">Item alpha</span>
            </a>
        </li>
        <li>
            <a class="c-refine-item" href="#" aria-label="Refine by Item beta">
                <span aria-hidden="true">Item beta</span>
            </a>
        </li>
        <li>
            <a class="c-refine-item" href="#" aria-label="Refine by Item charlie">
                <span aria-hidden="true">Item charlie</span>
            </a>
        </li>
        <li>
            <a class="c-refine-item f-selected" href="#" aria-label="Refine by Item delta">
                <span aria-hidden="true">Item delta</span>
            </a>
        </li>
        <li>
            <a class="c-refine-item" href="#" aria-label="Refine by Item echo">
                <span aria-hidden="true">Item echo</span>
            </a>
        </li>
        <li>
            <a class="c-refine-item f-selected" href="#" aria-label="Refine by Item foxtrot">
                <span aria-hidden="true">Item foxtrot</span>
            </a>
        </li>
        <li>
            <a class="c-refine-item f-selected" href="#" aria-label="Refine by Item gamma">
                <span aria-hidden="true">Item gamma</span>
            </a>
        </li>
    </ul>
</div>

Default drawer with divider option

<div class="c-drawer f-divider">
    <button class="c-glyph" aria-expanded="true" aria-controls="refineDrawer2">Drawer label</button>
    <ul id="refineDrawer2" data-js-select-type="multi-select" aria-label="Use these links to refine results for this page.">
        <li>
            <a class="c-refine-item" href="#" aria-label="Refine by Item alpha">
                <span aria-hidden="true">Item alpha</span>
            </a>
        </li>
        <li>
            <a class="c-refine-item" href="#" aria-label="Refine by Item beta">
                <span aria-hidden="true">Item beta</span>
            </a>
        </li>
        <li>
            <a class="c-refine-item" href="#" aria-label="Refine by Item charlie">
                <span aria-hidden="true">Item charlie</span>
            </a>
        </li>
        <li>
            <a class="c-refine-item f-selected" href="#" aria-label="Refine by Item delta">
                <span aria-hidden="true">Item delta</span>
            </a>
        </li>
        <li>
            <a class="c-refine-item" href="#" aria-label="Refine by Item echo">
                <span aria-hidden="true">Item echo</span>
            </a>
        </li>
        <li>
            <a class="c-refine-item f-selected" href="#" aria-label="Refine by Item foxtrot">
                <span aria-hidden="true">Item foxtrot</span>
            </a>
        </li>
        <li>
            <a class="c-refine-item f-selected" href="#" aria-label="Refine by Item gama">
                <span aria-hidden="true">Item gama</span>
            </a>
        </li>
    </ul>
</div>

Default responsive drawer

Autem voluptatem occaecati reiciendis labore blanditiis laboriosam quis. Minima distinctio quo doloremque reprehenderit enim veritatis quae consequatur. Est illum earum sequi repellendus quidem quia. Nemo nemo quia veniam quibusdam est accusantium unde libero laborum.

<div class="c-drawer" data-js-collapse="vp3">
    <button class="c-glyph" aria-expanded="false" aria-controls="responsiveDrawer">Responsive drawer label</button>
    <div id="responsiveDrawer">
        <p class="c-paragraph-3">Autem voluptatem occaecati reiciendis labore blanditiis laboriosam quis. Minima distinctio quo doloremque reprehenderit enim veritatis quae consequatur. Est illum earum sequi repellendus quidem quia. Nemo nemo quia veniam quibusdam est accusantium
            unde libero laborum.</p>
    </div>
</div>

Responsive drawer with divider

Autem voluptatem occaecati reiciendis labore blanditiis laboriosam quis. Minima distinctio quo doloremque reprehenderit enim veritatis quae consequatur. Est illum earum sequi repellendus quidem quia. Nemo nemo quia veniam quibusdam est accusantium unde libero laborum.

<div class="c-drawer f-divider" data-js-collapse="vp2">
    <button class="c-glyph" aria-expanded="false" aria-controls="responsiveDrawerDivider">Responsive drawer label</button>
    <div id="responsiveDrawerDivider">
        <p class="c-paragraph-3">Autem voluptatem occaecati reiciendis labore blanditiis laboriosam quis. Minima distinctio quo doloremque reprehenderit enim veritatis quae consequatur. Est illum earum sequi repellendus quidem quia. Nemo nemo quia veniam quibusdam est accusantium
            unde libero laborum.</p>
    </div>
</div>

Collapsed drawer with content

Autem voluptatem occaecati reiciendis labore blanditiis laboriosam quis. Minima distinctio quo doloremque reprehenderit enim veritatis quae consequatur. Est illum earum sequi repellendus quidem quia. Nemo nemo quia veniam quibusdam est accusantium unde libero laborum.

<div class="c-drawer">
    <button class="c-glyph" aria-expanded="false" aria-controls="simpleDrawer">Simple drawer label</button>
    <div id="simpleDrawer">
        <p class="c-paragraph-3">Autem voluptatem occaecati reiciendis labore blanditiis laboriosam quis. Minima distinctio quo doloremque reprehenderit enim veritatis quae consequatur. Est illum earum sequi repellendus quidem quia. Nemo nemo quia veniam quibusdam est accusantium
            unde libero laborum.</p>
    </div>
</div>