Breadcrum

A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy.

Usage

import React from 'react';
import {  Breadcrumb , BreadcrumbItem } from 'qdm-component-library';

function App() {
  return ( 
      <Breadcrumb Icon={'arrow'}>
      <BreadcrumbItem href="#">Home</BreadcrumbItem>
      <BreadcrumbItem href="#" active={true}>List</BreadcrumbItem>
      </Breadcrumb>
   );
}
export default App;

Reference

Props

Icon

In Qdm Component we provide 2 types of Icon.

• arrow
• slice

import React from 'react';
import {  Breadcrumb , BreadcrumbItem } from 'qdm-component-library';

function App() {
  return ( 
      <Breadcrumb Icon={'slice'}>
      <BreadcrumbItem href="#">Home</BreadcrumbItem>
      <BreadcrumbItem href="#" active={true}>List</BreadcrumbItem>
      </Breadcrumb>
   );
}
export default App;

href

Target of hyperlink

import React from 'react';
import {  Breadcrumb , BreadcrumbItem } from 'qdm-component-library';

function App() {
  return ( 
      <Breadcrumb Icon={'arrow'}>
      <BreadcrumbItem>Home</BreadcrumbItem>
      <BreadcrumbItem href="/hyperlink">Home List</BreadcrumbItem>
      </Breadcrumb>
   );
}
export default App;

active

The current location Active

import React from 'react';
import {  Breadcrumb , BreadcrumbItem } from 'qdm-component-library';

function App() {
  return ( 
      <Breadcrumb Icon={'slice'}>
      <BreadcrumbItem>Home</BreadcrumbItem>
      <BreadcrumbItem href="/hyperlink" active={true}>Home List</BreadcrumbItem>
      </Breadcrumb>
   );
}
export default App;

inLineStyles

props give addition props to the Breadcrumb element type Object