Breadcrumb

Install and import

yarn add @welcome-ui/breadcrumb @xstyled/styled-components @xstyled/system react react-dom styled-components

yarn add @welcome-ui/breadcrumb @xstyled/styled-components @xstyled/system react react-dom styled-components

import { Breadcrumb } from '@welcome-ui/breadcrumb'

import { Breadcrumb } from '@welcome-ui/breadcrumb'

Usage

Breadcrumb
Components
Introduction

Separator

You can customize your separator.

Breadcrumb
/Components
/Introduction
Breadcrumb
-Components
-Introduction

Usage with React Router

import { Link as RouterLink } from 'react-router-dom'
<Breadcrumb renderChildrenAs={RouterLink}>
  <Breadcrumb.Item to="/">Introduction</Breadcrumb.Item>
  <Breadcrumb.Item to="/components">Components</Breadcrumb.Item>
  <Breadcrumb.Item to='/components/breadcrumb'>Breadcrumb</Breadcrumb.Item>
</Breadcrumb>

import { Link as RouterLink } from 'react-router-dom'
<Breadcrumb renderChildrenAs={RouterLink}>
  <Breadcrumb.Item to="/">Introduction</Breadcrumb.Item>
  <Breadcrumb.Item to="/components">Components</Breadcrumb.Item>
  <Breadcrumb.Item to='/components/breadcrumb'>Breadcrumb</Breadcrumb.Item>
</Breadcrumb>

Properties

Breadcrumb

Name	Type(s)	Default
children	node
gradientBackground	string color from theme, add for scroll gradient on mobile	light.900
renderChildrenAs	union	a
separator	node \| string	<RightIcon size="sm" />

Breadcrumb.Item

Name	Type(s)	Default	Required
children	node
separator	node \| string

Dependencies

Peer dependencies

- @xstyled/styled-components
^2.2.3
- @xstyled/system
^2.2.3
- react
^16.10.2 || ^17.0.1
- react-dom
^16.10.2 || ^17.0.1
- styled-components
^5.2.1

Made with by