Category header

The category header pattern contains the name of the current category or section of a website or application and should link to the corresponding top-level page.

Rules for the category header

Must be used directly below the header and before the navigation bar.
The link must always navigate to the top-level page of the current category or section.

Options available

Linked category header
Linked category heading - deprecated
Image background with transparent overlay - deprecated

Linked category header

Example

Code

<!-- Begin pattern: category-header //-->
<nav id="category-header" aria-label="Category header">
    <div class="container">
        <div class='category-header__title'><a href="#">Category title</a></div>
    </div>
</nav>
<!-- End pattern: category-header //-->

Linked category heading - deprecated

This option is no longer supported

This implementation is now deprecated and will be removed in a future release.

Example

Code

<!-- Begin pattern: category-header //-->
<nav id="category-header" aria-label="Category header">
    <div class="container">
        <h2><a href="#">Category title</a></h2>
    </div>
</nav>
<!-- End pattern: category-header //-->

Image background with transparent overlay - deprecated

This option is no longer supported

This implementation is now deprecated and will be removed in a future release.

Example

Code

<!-- Begin pattern: category-header //-->
<nav id="category-header" aria-label="Category header">
    <div class="transparent-overlay">
        <div class="container">
            <h2><a href="#">Category title</a></h2>
        </div>
    </div>
</nav>
<!-- End pattern: category-header //-->