@zendeskgarden/react-chrome

Components relating to Chrome within the Garden Design System.

Usage no npm install needed!

<script type="module">
  import zendeskgardenReactChrome from 'https://cdn.skypack.dev/@zendeskgarden/react-chrome';
</script>

README

@zendeskgarden/react-chrome npm version

Collection of elements 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 styled-components @zendeskgarden/react-theming

Usages

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 isExpanded>
      <NavItem hasLogo product="connect" title="Zendesk Connect">
        <NavItemIcon>
          <ConnectIcon />
        </NavItemIcon>
        <NavItemText>Zendesk Connect</NavItemText>
      </NavItem>
      <NavItem isCurrent>
        <NavItemIcon>
          <HomeIcon />
        </NavItemIcon>
        <NavItemText>Home</NavItemText>
      </NavItem>
    </Nav>
    <SubNav>
      <SubNavItem isCurrent>
        <SubNavItemText>Subnav 1</SubNavItemText>
      </SubNavItem>
      ...
    </SubNav>
    <Body>
      <Header>
        ...
      </Header>
      <Content>
        <Main>
          Lorem ipsum...
        </Main>
      </Content>
    </Body>
  </Chrome>
</ThemeProvider>