React Breadcrumbs
Demo: https://trendmicro-frontend.github.io/react-breadcrumbs
- Install the latest version of react and react-breadcrumbs:
npm install --save react @trendmicro/react-breadcrumbs
- At this point you can import
@trendmicro/react-buttonsand its styles in your application as follows:
import Breadcrumbs from '@trendmicro/react-breadcrumbs';
// Be sure to include styles at some point, probably during your bootstraping
import '@trendmicro/react-breadcrumbs/dist/react-breadcrumbs.css';import React, { Component } from 'react';
import Anchor from '@trendmicro/react-anchor';
import Breadcrumbs from '@trendmicro/react-breadcrumbs';
class App extends Component {
render() {
return (
<Breadcrumbs>
<Breadcrumbs.Item>
<Anchor href="#/devices">Devices</Anchor>
</Breadcrumbs.Item>
<Breadcrumbs.Item>
<Anchor href="#/devices/firewall">Firewall</Anchor>
</Breadcrumbs.Item>
<Breadcrumbs.Item active>
Policies
</Breadcrumbs.Item>
</Breadcrumbs>
);
}
}You can add an icon on the right side, or add a line separator under the breadcrumbs.
<Breadcrumbs showLineSeparator>
<Breadcrumbs.Item>
Devices
</Breadcrumbs.Item>
<Breadcrumbs.Item active>
Firewall
</Breadcrumbs.Item>
<Anchor className="pull-right" href="https://github.com/trendmicro-frontend/react-breadcrumbs">
<i className="fa fa-question-circle" style={{ fontSize: 20 }} />
</Anchor>
</Breadcrumbs>| Name | Type | Default | Description |
|---|---|---|---|
| showLineSeparator | Boolean | false |
| Name | Type | Default | Description |
|---|---|---|---|
| active | Boolean | false |
MIT