The-simplest-breadcrumb NPM

Installation and Usage

1- Installing

npm install the-simplest-breadcrumb --save

2- Import it

import BreadcrumbMaster from 'the-simplest-breadcrumb'

3- Add any wrapper tag to html

<ul id="breadcrumb199__list"></ul>

4- Add this to your script

  BreadcrumbMaster({
    wrapper_id: 'breadcrumb199__list', 
    splitter: '/', 
    strings: {
        home: "Home", 
      },
  });

features

wrapper_id: (Required) this the id for the breadcrumb's wrapper tag in your html... just like breadcrumb199__list in <ul id="breadcrumb199__list"></ul>
splitter: the symbol you want to use between the breadcrumb items... if not provided, the " forwardslash /" will be used.
styles:
1. items_gab: margin between items
2. color: the color of the breadcrumb's items
3. color_selected: the color of the breadcrumb's items
4. splitter_color: the color of of the splitter between the items
customElements: an array of static items, just in case you want your breadcrumb to be static.

5.strings: an object that contains any string you want to change in the breadcrumb... the first item have to be home: "Home" always.

exceptions_list: an array of objects containing the pages you want to add a customElements in it instead of the breadcrumb's default behaviour. example :

exceptions_list:[
    {
     page:"user",
    customElements: [ 
      { index: 2, text: 'loremFirst', url: '#loremFirst' },
      { index: 3, text: 'loremSecond', url: '#loremSecond' },
      { index: 4, text: 'loremThird', url: '/amans199' },
    ],
  }
]

Use Cases

using the-simplest-breadcrumb in plain javascript to show a static breadcrumb

  BreadcrumbMaster({
    wrapper_id: 'breadcrumb199__list',
    splitter: '/',
    styles: {
      items_gab: '5px', 
      color: '#fff',
      color_selected: '#000', 
      splitter_color: '#fff'
    },
    customElements: [ 
      { index: 1, text: 'firstElement', url: '#' }, 
      { index: 2, text: 'secondElement', url: '#' },
      { index: 3, text: 'thirdElement', url: '#' },
      { index: 4, text: 'fourthElement', url: '#' },
    ],
    exceptions_list:[
        {
         page:"user",
        customElements: [ 
          { index: 2, text: 'loremFirst', url: '#loremFirst' },
          { index: 3, text: 'loremSecond', url: '#loremSecond' },
          { index: 4, text: 'loremThird', url: '/amans199' },
        ],
      },
      ]
  })

using the-simplest-breadcrumb with React to show a multilang dynamic breadcrumb

 render(){
    BreadcrumbMaster({
      wrapper_id: 'breadcrumb199__test2',
      splitter: '/', 
      styles: {
        items_gab: '5px', 
        color: '#fff',
        color_selected: '#000', 
        splitter_color: '#fff'
      },
      strings: {
        home: "Home", 
        user: "المستخدم",
        "users-list": "用户列表",
      },
      exceptions_list:[
        {
         page:"user",
        customElements: [ 
          { index: 2, text: 'loremFirst', url: '#loremFirst' },
          { index: 3, text: 'loremSecond', url: '#loremSecond' },
          { index: 4, text: 'loremThird', url: '/amans199' },
        ],
      },
      ]
    })
    return (
      <div className="App">
        <header className="App-header">
          <ul id="breadcrumb199__test2"></ul>
        </header>
      </div>
    );
  }

if you are using React-router then please don't forget to add the breadcrumb component inside a Switch ..

      <Switch>
           <App />
      </Switch>

using the-simplest-breadcrumb with Vue to show a multilang dynamic breadcrumb

data(){
  return{
    userString:"User String"
  };
},
 mounted(){
    BreadcrumbMaster({
      wrapper_id: 'breadcrumb199__test2',
      splitter: ">", 
      styles: {
        items_gab: '5px', 
        color: '#fff',
        color_selected: '#000', 
        splitter_color: '#fff'
      },
      strings: {
        home: "Home", 
        user: this.userString,
        "users-list": "用户列表",
      },
    exceptions_list:[
        {
         page:"user",
        customElements: [ 
          { index: 2, text: 'loremFirst', url: '#loremFirst' },
          { index: 3, text: 'loremSecond', url: '#loremSecond' },
          { index: 4, text: 'loremThird', url: '/amans199' },
        ],
      },
      ]
    })
  }

Notes

all the elements of the breadcrumb are injected to DOM in a way that makes it really easy tto be styled using plain css.
the-simplest-breadcrumb can be used with any type of application ( SPA or not SPA), and any type of javascript framework... whenever you place it in the right lifecycle, it will get the job done perfectly.

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.