Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. See official bootstrap document

Basic example

Add active prop to the active Breadcrumb.Item. Do not set both active and href attributes.active overrideshrefandspanelement is rendered instead of a.

Preview

Jsx

import React from 'react';
import { Breadcrumb } from 'react-bootstrap'

const BasicExample = () => {

  return (
        <Breadcrumb>
            <Breadcrumb.Item href="#">All images</Breadcrumb.Item>
            <Breadcrumb.Item href="#">Jampack</Breadcrumb.Item>
            <Breadcrumb.Item active aria-current="page">Gallery</Breadcrumb.Item>
        </Breadcrumb>
  );
};

export default BasicExample;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Sizes

Use.breadcrumb-sm classes with .breadcrumbfor sizes.

Preview

Jsx

import React from 'react';
import { Breadcrumb } from 'react-bootstrap'

const BreadcrumbSizes = () => {

  return (
        <Row>
            <Col>
                <Breadcrumb className="breadcrumb-simple">
                    <Breadcrumb.Item href="#">All images</Breadcrumb.Item>
                    <Breadcrumb.Item href="#">Jampack</Breadcrumb.Item>
                    <Breadcrumb.Item active aria-current="page">Gallery</Breadcrumb.Item>
                </Breadcrumb>
                <Breadcrumb className="breadcrumb breadcrumb-sm breadcrumb-simple">
                    <Breadcrumb.Item href="#">All images</Breadcrumb.Item>
                    <Breadcrumb.Item href="#">Jampack</Breadcrumb.Item>
                    <Breadcrumb.Item active aria-current="page">Gallery</Breadcrumb.Item>
                </Breadcrumb>
            </Col>
        </Row>
  );
};

export default BreadcrumbSizes;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Basic example
Sizes