x-breadcrumb

Polymer Custom Element for category breadcrumbs in Product Information Manager

Demo

Check it live!

Install

Install the component using Bower:

$ bower install x-breadcrumb --save

Or download as ZIP.

Usage

1. Import Web Components' polyfill:

   <script src="bower_components/webcomponentsjs/webcomponents.js"></script>

2. Import Custom Element:

   <link rel="import" href="bower_components/x-breadcrumb/x-breadcrumb.html">
   <link rel="import" href="bower_components/x-breadcrumb/x-crumb.html">

3. Start using it!

   <x-breadcrumb orientation='vertical'>
     <x-crumb value="Food" dropdown="true" listid="zeroLevelOptions">
       <li onclick="console.log('Food selected')"><a href="#"  data-id="item">Food 1</a></li>
       <li onclick="console.log('Clothing selected')"><a href="#" data-id="item">Clothing 1</a></li>
       <li onclick="console.log('Housing selected')"><a href="#" data-id="item">Housing 1</a></li>
     </x-crumb>
     <x-crumb value="Beverage" dropdown="true" listid="secondLevelOptions">
       <li onclick="console.log('Automobiles selected')"><a href="#" data-id="item">Automobiles</a></li>
       <li onclick="console.log('Laundry selected')"><a href="#" data-id="item">Laundry</a></li>
       <li onclick="console.log('Cleaning selected')"><a href="#" data-id="item">Cleaning</a></li>
     </x-crumb>
     <x-crumb value="Coke" dropdown="true" listid="thirdLevelOptions">
       <li onclick="console.log('Water selected')"><a href="#" data-id="item">Water</a></li>
       <li onclick="console.log('Eatables selected')"><a href="#" data-id="item">Eatables</a></li>
       <li onclick="console.log('grocery selected')"><a href="#" data-id="item">grocery</a></li>
     </x-crumb>
     <x-crumb value="Add" dropdown="true" listid="addLevelOptions">
   
     </x-crumb>
   </x-breadcrumb>

Options

x-breadcrumb

Attribute	Options	Default	Description
orientation	String	'horizontal'	orientation of the breadcrumbs to appeartoptions.

x-crumb

Attribute	Options	Default	Description
value	String	'horizontal'	label of the option.
dropdown	boolean	true	Should a searchable options list come up for this crumb
listid	String	``	list id to be used
search-query	String	``	Search query is used to filter the displayed list options
ghost	boolean	false	displayed as a ghost crumb
active	boolean	false	displayed as a active crumb , else normal crumb

Notes

• x-breadcrumb is a hybrid element.

Contributing and Development

History

For detailed changelog, check Releases.