react-breadcrumbs

React Breadcrumbs

Demo: https://trendmicro-frontend.github.io/react-breadcrumbs

Installation

1. Install the latest version of react and react-breadcrumbs:

npm install --save react @trendmicro/react-breadcrumbs

2. At this point you can import @trendmicro/react-buttons and 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';

Usage

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>

API

Properties

Breadcrumbs

Name	Type	Default	Description
showLineSeparator	Boolean	false

Breadcrumbs.Item

Name	Type	Default	Description
active	Boolean	false

License

MIT