Skip to main content

Refine menu

A refine menu is used to selectively show and hide content within a list based on some criteria. For example, you might want to view store apps based on "Best rated." By selecting "Best rated" in the refine menu, the list is reduced to only those items which are the most highly rated. More refine items can then be selected, limiting the list further to contain only those items fitting all selected criteria. In small viewports they are collapsed (and can be toggled). In large viewports they are vertical.

Example

Refine menu on the default theme

Best practices

Any list that contains more than a few items can benefit from a refine menu. Lists that are large enough to require scrolling benefit the most. A refine menu is also useful when the user might have specific criteria in mind for the list of results.

Do

  • Group refine items together by categories. Examples of menu groups: Price ranges, Delivery times, or User ratings.

Don’t

  • Don’t use to refine tables, place a select menu component above the table instead.

Also known as

Filters

Related

Drawer
Select menu

Accessibility

  • Aria Hidden: Add to span elements within c-refine-item to avoid screen reader duplication.
  • Aria Controls: aria-controls="*" attribute that is on the same node as the action. The value of this attribute must equal the ID assigned to the parent node content that this action controls.
  • Aria Expanded: Set aria-expanded="true" when the refine menu is open. Set aria-expanded="false" when the refine menu is closed.
  • Glyphs: Use aria-label for glyph only touch targets for screen readers. For example, close and expand.

Development

  • Schema definition: The refine-menu schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Default

<nav class="c-refine-menu">
    <div data-mobile-target id="codeExampleRefineMenu">
        <div>
            <h2 class="c-heading">
                <span>Single-select refine menu</span>
            </h2>
            <button class="c-action-trigger c-glyph glyph-cancel" aria-label="Collapse button" aria-expanded="true" aria-controls="codeExampleRefineMenu"></button>
        </div>
        <hr class="c-divider">
        <div class="c-drawer">
            <button class="c-glyph" aria-expanded="true" aria-controls="singleSelect">Heading</button>
            <ul id="singleSelect" data-js-select-type="single-select" aria-label="Use these links to refine results for this page. You may only refine by one item in this list.">
                <li>
                    <a class="c-refine-item" href="#" aria-label="Refine by Refine item 1">
                        <span aria-hidden="true">Refine item 1</span>
                    </a>
                </li>
                <li>
                    <a class="c-refine-item" href="#" aria-label="Refine by Refine item 2">
                        <span aria-hidden="true">Refine item 2</span>
                    </a>
                </li>
                <li>
                    <a class="c-refine-item" href="#" aria-label="Refine by Refine item 3">
                        <span aria-hidden="true">Refine item 3</span>
                    </a>
                </li>
            </ul>
        </div>
        <hr class="c-divider">
        <div class="c-drawer">
            <button class="c-glyph" aria-expanded="true" aria-controls="multiSelect">Multi-select refine menu</button>
            <ul id="multiSelect" data-js-select-type="multi-select" aria-label="Use these links to refine results for this page.">
                <li>
                    <a class="c-refine-item f-selected" href="#" aria-label="Refine by Refine item 1">
                        <span aria-hidden="true">Refine item 1</span>
                    </a>
                </li>
                <li>
                    <a class="c-refine-item" href="#" aria-label="Refine by Refine item 2">
                        <span aria-hidden="true">Refine item 2</span>
                    </a>
                </li>
                <li>
                    <a class="c-refine-item" href="#" aria-label="Refine by Refine item 3">
                        <span aria-hidden="true">Refine item 3</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <button class="c-action-trigger" aria-label="Expand label" aria-expanded="true" aria-controls="codeExampleRefineMenu">Expand refine menu</button>
</nav>

Submenu option

<nav class="c-refine-menu">
    <div data-mobile-target id="exampleRefineSubmenu2">
        <div>
            <h2 class="c-heading">
                <span>Heading</span>
            </h2>
            <button class="c-action-trigger c-glyph glyph-cancel" aria-label="Collapse refine menu" aria-expanded="true" aria-controls="exampleRefineSubmenu2"></button>
        </div>
        <hr class="c-divider">
        <div class="c-drawer">
            <button class="c-glyph" aria-expanded="true" aria-controls="singleSelect2">Single select group</button>
            <ul id="singleSelect2" data-js-select-type="single-select" aria-label="Use these links to refine results for this page. You may only refine by one item in this list.">
                <li>
                    <a class="c-refine-item" href="#" aria-label="Refine by Refine 1">
                        <span aria-hidden="true">Refine 1</span>
                    </a>
                </li>
                <li>
                    <a class="c-refine-item" href="#" aria-label="Refine by Refine 2">
                        <span aria-hidden="true">Refine 2</span>
                    </a>
                    <ul>
                        <li>
                            <a class="c-refine-item" href="#" aria-label="Refine by Sub-refine 1">
                                <span aria-hidden="true">Sub-refine 1</span>
                            </a>
                        </li>
                        <li>
                            <a class="c-refine-item" href="#" aria-label="Refine by Sub-refine 2">
                                <span aria-hidden="true">Sub-refine 2</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a class="c-refine-item" href="#" aria-label="Refine by Refine 3">
                        <span aria-hidden="true">Refine 3</span>
                    </a>
                </li>
            </ul>
        </div>
        <hr class="c-divider">
        <div class="c-drawer">
            <button class="c-glyph" aria-expanded="true" aria-controls="multiSelect2">Multi-select group</button>
            <ul id="multiSelect2" data-js-select-type="multi-select" aria-label="Use these links to refine results for this page.">
                <li>
                    <a class="c-refine-item f-selected" href="#" aria-label="Refine by Refine 1">
                        <span aria-hidden="true">Refine 1</span>
                    </a>
                </li>
                <li>
                    <a class="c-refine-item" href="#" aria-label="Refine by Refine 2">
                        <span aria-hidden="true">Refine 2</span>
                    </a>
                    <ul>
                        <li>
                            <a class="c-refine-item" href="#" aria-label="Refine by Sub-refine 1">
                                <span aria-hidden="true">Sub-refine 1</span>
                            </a>
                        </li>
                        <li>
                            <a class="c-refine-item" href="#" aria-label="Refine by Sub-refine 2">
                                <span aria-hidden="true">Sub-refine 2</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a class="c-refine-item" href="#" aria-label="Refine by Refine 3">
                        <span aria-hidden="true">Refine 3</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <button class="c-action-trigger" aria-label="Expand refine menu" aria-expanded="true" aria-controls="exampleRefineSubmenu2">Refine Results</button>
</nav>

Overflow option

<nav class="c-refine-menu">
    <div data-mobile-target id="exampleRefineOverflow">
        <div>
            <h2 class="c-heading">
                <span>Heading</span>
            </h2>
            <button class="c-action-trigger c-glyph glyph-cancel" aria-label="Collapse refine menu" aria-expanded="true" aria-controls="exampleRefineOverflow"></button>
        </div>
        <hr class="c-divider">
        <div class="c-drawer">
            <button class="c-glyph" aria-expanded="true" aria-controls="singleSelect3">Single select group with overflow</button>
            <div id="singleSelect3">
                <div class="c-content-toggle">
                    <ul id="contentToggle" data-f-expanded="false" data-js-select-type="single-select" aria-label="Use these links to refine results for this page. You may only refine by one item in this list.">
                        <li>
                            <a class="c-refine-item" href="#" aria-label="Refine by Refine 1">
                                <span aria-hidden="true">Refine 1</span>
                            </a>
                        </li>
                        <li>
                            <a class="c-refine-item" href="#" aria-label="Refine by Refine 2">
                                <span aria-hidden="true">Refine 2</span>
                            </a>
                        </li>
                        <li>
                            <a class="c-refine-item" href="#" aria-label="Refine by Refine 3">
                                <span aria-hidden="true">Refine 3</span>
                            </a>
                            <ul>
                                <li>
                                    <a class="c-refine-item" href="#" aria-label="Refine by Sub-refine 1">
                                        <span aria-hidden="true">Sub-refine 1</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="c-refine-item" href="#" aria-label="Refine by Sub-refine 2">
                                        <span aria-hidden="true">Sub-refine 2</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a class="c-refine-item" href="#" aria-label="Refine by Refine 4">
                                <span aria-hidden="true">Refine 4</span>
                            </a>
                        </li>
                    </ul>
                    <button data-f-more="More" data-f-less="Less" data-f-show="2" aria-hidden="true">More</button>
                </div>
            </div>
        </div>
        <hr class="c-divider">
        <div class="c-drawer">
            <button class="c-glyph" aria-expanded="true" aria-controls="multiSelect3">Multi select group with overflow</button>
            <div id="multiSelect3">
                <div class="c-content-toggle">
                    <ul id="contentToggle2" data-f-expanded="false" 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 Refine 1">
                                <span aria-hidden="true">Refine 1</span>
                            </a>
                            <ul>
                                <li>
                                    <a class="c-refine-item" href="#" aria-label="Refine by Sub-refine 1">
                                        <span aria-hidden="true">Sub-refine 1</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="c-refine-item f-selected" href="#" aria-label="Refine by Sub-refine 2">
                                        <span aria-hidden="true">Sub-refine 2</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a class="c-refine-item" href="#" aria-label="Refine by Refine 2">
                                <span aria-hidden="true">Refine 2</span>
                            </a>
                        </li>
                        <li>
                            <a class="c-refine-item" href="#" aria-label="Refine by Refine 3">
                                <span aria-hidden="true">Refine 3</span>
                            </a>
                            <ul>
                                <li>
                                    <a class="c-refine-item" href="#" aria-label="Refine by Sub-refine 1">
                                        <span aria-hidden="true">Sub-refine 1</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="c-refine-item f-selected" href="#" aria-label="Refine by Sub-refine 2">
                                        <span aria-hidden="true">Sub-refine 2</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a class="c-refine-item" href="#" aria-label="Refine by Refine 4">
                                <span aria-hidden="true">Refine 4</span>
                            </a>
                        </li>
                    </ul>
                    <button data-f-more="More" data-f-less="Less" data-f-show="4" aria-hidden="true">More</button>
                </div>
            </div>
        </div>
    </div>
    <button class="c-action-trigger" aria-label="Expand refine menu" aria-expanded="true" aria-controls="exampleRefineOverflow">Refine Results</button>
</nav>