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.
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 color while
still maintaining accessible contrast levels.
Configuration
- Name8.42.0•View source•View on npm
- Installnpm install @zendeskgarden/react-chrome
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Body, Chrome, CollapsibleSubNavItem, Content, Footer, FooterItem, Header, HeaderItem, HeaderItemIcon, HeaderItemText, HeaderItemWrapper, Main, Nav, NavItem, NavItemIcon, NavItemText, Sidebar, SkipNav, 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 HTMLAttributes<HTMLDivElement>
| 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 | PRODUCT | – | Applies a brand color to the product logo |
HeaderItemIcon
Extends HTMLAttributes<any>
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 | PRODUCT | – | Applies a product-specific color palette |
NavItemIcon
Extends HTMLAttributes<any>
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. |