@zendeskgarden/react-chrome npm version

Collection of elements, render prop containers, and presentation components relating to the Chrome component within the Garden Design System

Installation

npm install @zendeskgarden/react-chrome

# Peer Dependencies - Also Required
npm install react react-dom prop-types styled-components @zendeskgarden/react-theming

Usages

/**
 * Include chrome styling at the root of your application
 */
import '@zendeskgarden/react-chrome/dist/styles.css';

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Chrome, Nav, NavItem, ... } from '@zendeskgarden/react-chrome';
import ConnectIcon from '@zendeskgarden/icons/src/26/relationshape-connect.svg';

<ThemeProvider>
  <Chrome>
    <Nav expanded>
      <NavItem logo product="connect" title="Zendesk Connect">
        <NavItemIcon>
          <ConnectIcon />
        </NavItemIcon>
        <NavItemText>Zendesk Connect</NavItemText>
      </NavItem>
      <NavItem current>
        <NavItemIcon>
          <HomeIcon />
        </NavItemIcon>
        <NavItemText>Home</NavItemText>
      </NavItem>
    </Nav>
    <SubNav>
      <SubNavItem current>
        <SubNavItemText>Subnav 1</SubNavItemText>
      </SubNavItem>
      ...
    </SubNav>
    <Body>
      <Header>
        ...
      </Header>
      <Content>
        <Main>
          Lorem ipsum...
        </Main>
      </Content>
    </Body>
  </Chrome>
</ThemeProvider>

Views

Chrome

Chrome

import { Chrome } from '@zendeskgarden/react-chrome'

Accepts all <div> props

Simple Usage

Due to the wide variety of routing strategies within React, the Chrome component doesn't provide any opinionated navigation solutions.

All NavItem and SubNavItem components are button elements that accept all native props. If you are using a routing library like react-router, you can programmatically trigger navigation with the onClick events.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut aliquam purus sit amet. Cum sociis natoque penatibus et magnis. Semper auctor neque vitae tempus. Id cursus metus aliquam eleifend mi. Nibh cras pulvinar mattis nunc sed. Semper quis lectus nulla at volutpat diam. Sit amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar. Sollicitudin aliquam ultrices sagittis orci. Id nibh tortor id aliquet lectus proin nibh nisl condimentum. Sagittis aliquam malesuada bibendum arcu. Risus commodo viverra maecenas accumsan lacus vel. Mauris in aliquam sem fringilla ut morbi tincidunt. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit. Eget dolor morbi non arcu risus quis.

Mauris in aliquam sem fringilla ut morbi. Sit amet est placerat in egestas erat imperdiet. Amet venenatis urna cursus eget nunc. Gravida in fermentum et sollicitudin ac orci phasellus egestas tellus. Vitae tortor condimentum lacinia quis vel eros. Eget lorem dolor sed viverra ipsum nunc. Orci a scelerisque purus semper eget. Nisl pretium fusce id velit ut tortor pretium viverra. Scelerisque felis imperdiet proin fermentum leo vel. Facilisis volutpat est velit egestas dui id. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis. Malesuada fames ac turpis egestas integer eget aliquet. Nisl pretium fusce id velit ut tortor. Convallis convallis tellus id interdum. Ultrices sagittis orci a scelerisque purus semper.

Dignissim convallis aenean et tortor. Diam maecenas sed enim ut sem viverra aliquet. Dolor purus non enim praesent elementum facilisis. Porttitor eget dolor morbi non arcu risus quis varius. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus quam. Cursus euismod quis viverra nibh. Orci eu lobortis elementum nibh tellus molestie nunc non blandit. Velit sed ullamcorper morbi tincidunt. Aliquam id diam maecenas ultricies mi. Suspendisse potenti nullam ac tortor vitae purus faucibus ornare suspendisse. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Tempor nec feugiat nisl pretium. Ac orci phasellus egestas tellus rutrum tellus. Viverra maecenas accumsan lacus vel facilisis volutpat est.

Nav

Nav

import { Nav } from '@zendeskgarden/react-chrome'

Accepts all <div> props

Prop name
Type
Default
Description
dark
bool
-

Apply dark styling

expanded
bool
-

Expand navigation area to include item text

light
bool
-

Apply light styling

NavItem

import { NavItem } from '@zendeskgarden/react-chrome'

Accepts all <button> props

Prop name
Type
Default
Description
active
bool
-
brandmark
bool
-

Style a brandmark shown as a bottom item in the nav

current
bool
-

Indicate which item is current in the nav

focused
bool
-
hovered
bool
-
logo
bool
-

Style the product logo shown as the top item in the nav

product
enum
-

Applies product-specific color palette

One of: chat, connect, explore, guide, message, support, talk

Products

All product color schemes can be applied with their associated NavItem property.

States

NavItemIcon

import { NavItemIcon } from '@zendeskgarden/react-chrome'

Applies styling directly to child component

Prop name
Type
Default
Description
children
node
-

NavItemText

import { NavItemText } from '@zendeskgarden/react-chrome'

Accepts all <span> props

Prop name
Type
Default
Description
isWrapped
bool
-

Wrap overflow text instead of truncating long strings with an ellipsis

SubNav

CollapsibleSubNavItem

import { CollapsibleSubNavItem } from '@zendeskgarden/react-chrome'

Accepts all <button> props

Prop name
Type
Default
Description
children
node
-
expanded
bool
-
focused
bool
-
header
any
-
hovered
bool
-
onChange
func
-

SubNav

import { SubNav } from '@zendeskgarden/react-chrome'

Accepts all <div> props

SubNavItem

import { SubNavItem } from '@zendeskgarden/react-chrome'

Accepts all <button> props

Prop name
Type
Default
Description
current
bool
-

Indicate which item is current in the nav

focused
bool
-
hovered
bool
-

SubNavItemText

import { SubNavItemText } from '@zendeskgarden/react-chrome'

Accepts all <span> props

Prop name
Type
Default
Description
isWrapped
bool
-

Wrap overflow text instead of truncating long strings with an ellipsis (use in conjunction with max-width styling applied to the SubNav container)

Body

Header

Header

import { Header } from '@zendeskgarden/react-chrome'

Accepts all <header> props

Prop name
Type
Default
Description
standalone
bool
-

Display logo for standlone usage

Example flex-grow content

HeaderItem

import { HeaderItem } from '@zendeskgarden/react-chrome'

Accepts all <button> props

Prop name
Type
Default
Description
active
bool
-
focused
bool
-
hovered
bool
-
logo
bool
-

Style the product logo shown as the first item in the header

maxX
bool
-

Horizontally maximize a flex item in the header to take as much space as possible (i.e. breadcrumb container)

maxY
bool
-

Vertically maximize the height for a header item (i.e. contains a search input)

product
enum
-

Applies product-specific color palette

One of: chat, connect, explore, guide, message, support, talk
round
bool
-

Round the border radius for a header item (i.e. user icon)

States

HeaderItemIcon

import { HeaderItemIcon } from '@zendeskgarden/react-chrome'

Applies styling directly to child component

Prop name
Type
Default
Description
children
node
-

HeaderItemText

import { HeaderItemText } from '@zendeskgarden/react-chrome'

Accepts all <span> props

Prop name
Type
Default
Description
clipped
bool
-

Clip text (but leave accessible to screenreaders) for an icon-only header item

HeaderItemWrapper

import { HeaderItemWrapper } from '@zendeskgarden/react-chrome'

Accepts all <div> props

Prop name
Type
Default
Description
active
bool
-
focused
bool
-
hovered
bool
-
logo
bool
-

Style the product logo shown as the first item in the header

maxX
bool
-

Horizontally maximize a flex item in the header to take as much space as possible (i.e. breadcrumb container)

maxY
bool
-

Vertically maximize the height for a header item (i.e. contains a search input)

product
enum
-

Applies product-specific color palette

One of: chat, connect, explore, guide, message, support, talk
round
bool
-

Round the border radius for a header item (i.e. user icon)

Footer

Footer

import { Footer } from '@zendeskgarden/react-chrome'

Accepts all <footer> props. Remember to set the hasFooter prop on the parent <Body>.

FooterItem

import { FooterItem } from '@zendeskgarden/react-chrome'

Accepts all <div> props

Body

import { Body } from '@zendeskgarden/react-chrome'

Accepts all <div> props

Prop name
Type
Default
Description
hasFooter
bool
-

Prepare the body content height to allow space for a footer component

Content

import { Content } from '@zendeskgarden/react-chrome'

Accepts all <div> props

Main

import { Main } from '@zendeskgarden/react-chrome'

Accepts all <main> props

Sidebar

import { Sidebar } from '@zendeskgarden/react-chrome'

Accepts all <aside> props

Main Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.