Chrome
The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
- To give Zendesk products a consistent dashboard and navigation experience
How to use it
Default
A typical usage of a Chrome component framework.
Global alert
Remember to adjust Chrome height with the addition of Global alerts.
Standalone header
A Header component can be used in isolation while still displaying Zendesk product logos.
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.
Icons
Chrome uses 26px sized icons made specifically for this component.
Configuration
- Name8.76.4•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, Sidebar, Footer, FooterItem, Header, HeaderItem, HeaderItemIcon, HeaderItemText, HeaderItemWrapper, Nav, NavItem, NavItemIcon, NavItemText, CollapsibleSubNavItem, SubNav, SubNavItem, SubNavItemText } from '@zendeskgarden/react-chrome'
API
Body
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
hasFooter | boolean | – | Adjusts the body content height to allow space for a footer component |
Chrome
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
hue | string | – | Applies a custom hue to the chrome navigation |
isFluid | boolean | – | Prevents fixed positioning from being applied to the <html> element |
CollapsibleSubNavItem
Extends ButtonHTMLAttributes<HTMLButtonElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
header | ReactNode | – | Sets the item's section header |
isExpanded | boolean | – | Reveals the item's section |
onChange | – | Handles changes in the item's expansion state Parameters isExpanded An item's expansion state |
Content
Extends HTMLAttributes<HTMLDivElement>
Footer
Extends HTMLAttributes<HTMLElement>
FooterItem
Extends HTMLAttributes<HTMLElement>
Header
Extends HTMLAttributes<HTMLElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isStandalone | boolean | – | Displays logo for standlone usage |
HeaderItem
Extends ButtonHTMLAttributes<HTMLButtonElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
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' | 'connect' | 'explore' | 'guide' | 'message' | 'support' | 'talk' | – | Applies a brand color to the product logo |
HeaderItemIcon
Extends HTMLAttributes<HTMLElement>
HeaderItemText
Extends HTMLAttributes<HTMLSpanElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isClipped | boolean | – | Hides item text. Text remains accessible to screen readers. |
HeaderItemWrapper
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
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
Extends HTMLAttributes<HTMLElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isExpanded | boolean | – | Expands the nav area to display the item text |
NavItem
Extends ButtonHTMLAttributes<HTMLButtonElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
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' | 'connect' | 'explore' | 'guide' | 'message' | 'support' | 'talk' | – | Applies a product-specific color palette |
NavItemIcon
Extends HTMLAttributes<HTMLElement>
NavItemText
Extends HTMLAttributes<HTMLSpanElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isWrapped | boolean | – | Wraps overflow item text instead of truncating long strings with an ellipsis |
Sidebar
Extends HTMLAttributes<HTMLElement>
SkipNav
Extends AnchorHTMLAttributes<HTMLAnchorElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
targetId | string | Required | Sets the ID of the element to navigate to |
zIndex | number | 1 | Sets the z-index of the element |
SubNav
Extends HTMLAttributes<HTMLElement>
SubNavItem
Extends ButtonHTMLAttributes<HTMLButtonElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isCurrent | boolean | – | Indicates that the item is current in the subnav |
SubNavItemText
Extends HTMLAttributes<HTMLSpanElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isWrapped | boolean | – | Wraps overflow item text instead of truncating long strings with an ellipsis. Use when max-width styling is applied to the subnav container. |