Nutritious Pumpkin Masses

    @trendmicro/react-breadcrumbs

    0.5.5 • Public • Published

    react-breadcrumbs build status Coverage Status

    NPM

    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
    
    1. 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

    Install

    npm i @trendmicro/react-breadcrumbs

    DownloadsWeekly Downloads

    478

    Version

    0.5.5

    License

    MIT

    Last publish

    Collaborators

    • trendmicro-frontend
    • cheton
    • rothpeng
    • smalltase