CSS Components / Chrome

Chrome

This component has been deprecated

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.

Toggle the .c-chrome__nav--expanded class on the nav bars below.
The default nav component is styled with Zendesk's Kale brand color. Select an alternate brand color to apply either .c-chrome__nav--dark or .c-chrome__nav--light in conjunction with an inline background-color override.
The demo uses TinyColor to determine whether the selected color is dark or light.

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.

Toggle the .c-chrome__body__header--standalone class on the headers below.
  1. Bread
  2. Crumb

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--logo to 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__subnav container to wrap long text.
  • .c-chrome__subnav__panel.is-hidden – remove in conjunction with the associated .c-chrome__subnav__item--header expansion to reveal the accordion panel. Note that in order to achieve the intended animation, a max-height should 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__footer child 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.

State

.is-focused
.is-active
.is-hovered
default

Playground