Chrome
See the Chrome
component in Garden's @zendeskgarden/react-chrome
package for the latest updates.
The .c-chrome component
classes are used to style Zendesk product chrome: navigation, header and
content layout.
Open full page Chrome in a separate window.
Remember to apply the proper set of
Garden Favicons to your
specific product pages. See the Garden React
chrome
package for enhanced keyboard and event behavior.
Basic Structure
The product chrome CSS classes describe the following canonical structure. Although exact implementations will vary, be sure to sequence the components as indicated so that tab order is consistent from one product to the next.
-
<body class="c-chrome">-
<nav class="c-chrome__nav">-
<a class="c-chrome__nav__item">-
<svg class="c-chrome__nav__item__icon"> -
<span class="c-chrome__nav__item__text">
-
-
<a class="c-chrome__nav__item"> - etc.
-
-
<nav class="c-chrome__subnav">(optional)-
<a class="c-chrome__subnav__item">-
<span class="c-chrome__subnav__item__text">
-
-
<a class="c-chrome__subnav__item"> - etc.
-
-
<div class="c-chrome__body">-
<header class="c-chrome__body__header"> -
<button class="c-chrome__body__header__item">-
<svg class="c-chrome__body__header__item__icon"> -
<span class="c-chrome__body__header__item__text">
-
-
<button class="c-chrome__body__header__item"> - etc.
-
<div class="c-chrome__body__content">-
<aside class="c-chrome__body__content__sidebar">(optional) -
<main class="c-chrome__body__content__main">
-
-
<footer class="c-chrome__body__footer">(optional) -
<div class="c-chrome__body__footer__item"> - etc.
-
-
Navigation
The .c-chrome__nav element
is the home for the product logo and main navigation items. In addition,
products may include a floating action button (FAB) in the nav. The nav
may receive a .c-chrome__nav--expanded
modifier to show navigation item text. Otherwise, the text is clipped
from view but accessible for screenreaders.
.c-chrome__nav--expanded
class on the nav bars below.
.c-chrome__nav--dark or
.c-chrome__nav--light in conjunction
with an inline background-color override.
The accordion pattern seen in the final navigation example's subnav is accomplished using the following structure. See class modifiers below for controlling accordion expand/collapse.
-
<button class="c-chrome__subnav__item c-chrome__subnav__item--header">-
<div class="c-chrome__subnav__panel is-hidden">-
<a class="c-chrome__subnav__item"> - etc.
-
-
Header
The .c-chrome__body__header
element contains header menu items. The
.c-menu
components demonstrated below are packaged separately from the chrome
components. Menus must be positioned with respect to their header menu
items precisely as shown. The header may be displayed standalone
– with a product logo – or along with the side navigation shown above.
By default, the .c-chrome__body__header__item
elements contained in the header are designed to be focusable. However,
they may also be used as containers for other focusable elements, in
which case they provide consistent item spacing. See the modifier
classes below for more details.
.c-chrome__body__header--standalone
class on the headers below.
Footer
The .c-chrome__body__footer
element contains footer items – typically "Save" and "Cancel" action
buttons – within individual .c-chrome__body__footer__item
children used to provide consistent item spacing.
Modification
In addition to the navigation and header modifiers shown above, the following BEM classes are available to modify various components of the chrome.
.c-chrome--dark– toggles "dark mode" styling (via settings menu)..c-chrome.is-rtl– toggles RTL layout (via settings menu)..c-chrome--custom– toggles accent overrides (via settings menu)..c-chrome__nav__item--brandmark– combine with.c-chrome__nav__item--logoto style a brandmark at the bottom of the nav (note that additional navigation items may appear beneath this item if the product design calls for it)..c-chrome__nav__item--logo– style the product logo shown as the top item in the nav..c-chrome__nav__item.is-current– indicate which item is current in the nav..c-chrome__nav__item__text--wrap– use to wrap long text in the nav..c-chrome__subnav__item--header.is-expanded– toggle to indicate accordion expansion..c-chrome__subnav__item__text--wrap– combine with max-width on the.c-chrome__subnavcontainer to wrap long text..c-chrome__subnav__panel.is-hidden– remove in conjunction with the associated.c-chrome__subnav__item--headerexpansion to reveal the accordion panel. Note that in order to achieve the intended animation, amax-heightshould be manually applied to the panel for the full height of the expanded container..c-chrome__body--footer– set the body content height to allow space for a.c-chrome__body__footerchild element; otherwise, the footer will be pushed out of view..c-chrome__body__header__item--logo– style the product logo shown as the first item in the header (only displayed in standalone)..c-chrome__body__header__item--max-x– horizontally maximize a flex item in the header to take as much space as possible (i.e. breadcrumb container or an empty element separating starting items from ending items)..c-chrome__body__header__item--max-y– vertically maximize the height for a header item (i.e. contains a search input)..c-chrome__body__header__item--round– round the border radius for a header item (i.e. user icon)..c-chrome__body__header__item__text.is-clipped– clip text (but leave accessible to screenreaders) for an icon-only header item.