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
- Name9.0.0-next.26•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 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 |
Content
Extends HTMLAttributes<HTMLDivElement>
Footer
Extends HTMLAttributes<HTMLElement>
Footer.Item
Extends HTMLAttributes<HTMLElement>
Header
| Prop name | Type | Default | Description |
|---|---|---|---|
isStandalone | boolean | Displays logo for standlone usage |
Header.Item
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' | 'explore' | 'guide' | 'support' | 'talk' | Applies a brand color to the product logo |
Header.ItemIcon
Extends SVGAttributes<SVGElement>
Header.ItemText
Extends HTMLAttributes<HTMLSpanElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isClipped | boolean | Hides item text. Text remains accessible to screen readers. |
Header.ItemWrapper
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
| Prop name | Type | Default | Description |
|---|---|---|---|
isExpanded | boolean | Expands the nav area to display the item text |
Nav.Item
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' | 'explore' | 'guide' | 'support' | 'talk' | Applies a product-specific color palette |
Nav.ItemIcon
Extends SVGAttributes<SVGElement>
Nav.ItemText
Extends HTMLAttributes<HTMLSpanElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isWrapped | boolean | Wraps overflow item text instead of truncating long strings with an ellipsis |
Nav.List
Extends HTMLAttributes<HTMLUListElement>
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 |