Garden 9 is now available.
The website has been updated to the latest major version. View previous versions
Skip to main content
Design
Components
Patterns
    • Introduction
      • Overview
    • Foundations
      • Bedrock CSS
      • Design tokens
      • Containers
      • Theming
      • Versions
    • Components
      • Accordion
      • Anchor
      • Avatar
      • Breadcrumbs
      • Buttons
      • Chrome
      • Code block
      • Color picker
      • Color swatch
      • Date picker
      • Draggable
      • Drawer
      • Forms
      • Grid
      • Loaders
      • Menu
      • Modal
      • Notification
      • Pagination
      • Pane
      • Sheet
      • Status indicator
      • Stepper
      • Table
      • Tabs
      • Tags
      • Tiles
      • Timeline
      • Tooltip
      • Tooltip dialog
      • Typography
      • Well
    Table of Contents
    • How to use it
      • Default
      • Global alert
      • Standalone header
      • Navigation panel
      • Icons
    • Configuration
    • API
      • Body
      • Chrome
      • Content
      • Footer
      • Header
      • Main
      • Nav
      • SkipNav

    Chrome

    The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.


    Table of Contents
    • How to use it
      • Default
      • Global alert
      • Standalone header
      • Navigation panel
      • Icons
    • Configuration
    • API
      • Body
      • Chrome
      • Content
      • Footer
      • Header
      • Main
      • Nav
      • SkipNav

    Used for this
    • To give Zendesk products a consistent dashboard and navigation experience

    How to use it

    Default

    A typical usage of a Chrome component framework.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Global alert

    Remember to adjust Chrome height with the addition of Global alerts.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Standalone header

    A Header component can be used in isolation while still displaying Zendesk product logos.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Navigation panel

    The panel can be expanded to display labels alongside nav icons. A subnav can be shown for additional items. The hue can be modified to change the nav background color. Note this may result in inaccessible contrast levels on nav buttons. Always test the resulting contrast values to ensure they’re compliant with WCAG guidelines.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Icons

    Chrome uses 26px sized icons made specifically for this component.

    Configuration

    • Name9.5.3•View source•View on npm
    • Installnpm install @zendeskgarden/react-chrome
    • Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
    • Importimport { Chrome, SkipNav, Body, Content, Main, Footer, Header, Nav } from '@zendeskgarden/react-chrome'

    API

    Body

    Extends HTMLAttributes<HTMLDivElement>

    Chrome

    Extends HTMLAttributes<HTMLDivElement>

    Prop nameTypeDefaultDescription
    hue
    string

    Applies a custom hue to the chrome navigation

    isFluid
    boolean

    Prevents fixed positioning from being applied to the <html> element

    Content

    Extends HTMLAttributes<HTMLDivElement>

    Footer

    Extends HTMLAttributes<HTMLElement>

    Footer.Item

    Extends HTMLAttributes<HTMLElement>

    Header

    Prop nameTypeDefaultDescription
    isStandalone
    boolean

    Displays logo for standlone usage

    Header.Item

    Extends ButtonHTMLAttributes<HTMLButtonElement>

    Prop nameTypeDefaultDescription
    hasLogo
    boolean

    Applies header logo styles to the item

    isRound
    boolean

    Rounds the border radius of the item

    maxX
    boolean

    Maximizes the width of a flex item in the header

    maxY
    boolean

    Maximizes the height of the item (i.e. contains a search input)

    product
    'chat' | 'explore' | 'guide' | 'support' | 'talk'

    Applies a brand color to the product logo

    Header.ItemIcon

    Extends SVGAttributes<SVGElement>

    Header.ItemText

    Extends HTMLAttributes<HTMLSpanElement>

    Prop nameTypeDefaultDescription
    isClipped
    boolean

    Hides item text. Text remains accessible to screen readers.

    Header.ItemWrapper

    Extends HTMLAttributes<HTMLDivElement>

    Prop nameTypeDefaultDescription
    isRound
    boolean

    Rounds the border radius of the item

    maxX
    boolean

    Maximizes the width of a flex item in the header

    maxY
    boolean

    Maximizes the height of the item (i.e. contains a search input)

    Main

    Extends HTMLAttributes<HTMLElement>

    Nav

    Prop nameTypeDefaultDescription
    isExpanded
    boolean

    Expands the nav area to display the item text

    Nav.Item

    Extends ButtonHTMLAttributes<HTMLButtonElement>

    Prop nameTypeDefaultDescription
    hasBrandmark
    boolean

    Indicates that the item contains the company brandmark

    hasLogo
    boolean

    Indicates that the item contains a product logo

    isCurrent
    boolean

    Indicates that the item is current in the nav

    product
    'chat' | 'explore' | 'guide' | 'support' | 'talk'

    Applies a product-specific color palette

    Nav.ItemIcon

    Extends SVGAttributes<SVGElement>

    Nav.ItemText

    Extends HTMLAttributes<HTMLSpanElement>

    Prop nameTypeDefaultDescription
    isWrapped
    boolean

    Wraps overflow item text instead of truncating long strings with an ellipsis

    Nav.List

    Extends HTMLAttributes<HTMLUListElement>

    SkipNav

    Extends AnchorHTMLAttributes<HTMLAnchorElement>

    Prop nameTypeDefaultDescription
    targetId
    string
    Required

    Sets the ID of the element to navigate to

    zIndex
    number
    1

    Sets the z-index of the element

    Garden is the design system by Zendesk.
    BlogGitHubVersions
    © Zendesk 2025