## Breadcrumb

### Usage

```jsx
import { Breadcrumb } from 'ui-components';

const path = [
	{
		title: 'Teams'
	},
	{
		title: 'Backlog Change',
		path: '/signal/backlog-change/team/all'
	},
	{
		options: [
			{ text: 'Frontend', value: 'fe', active: true },
			{ text: 'Backend', value: 'be' }
		]
	}
];

<Breadcrumb
	path={path}
	onChange={(e, { value }) => {
		console.log(`Switched to ${value}`);
	}}
	onClick={(e, { value }) => {
		console.log(`Selected ${value}`);
	}}
/>
```

### Parameters

* `path` (required) is an array of path pieces
	* `title` is the text that is displayed in the breadcrumb
	* `path` is the URL to link to from the path piece
	* `options` is an array of dropdown options (exclusive of `title` and `path`)
		* `text` is the text to display
		* `value` is the value of the option
		* `active` (required) is a boolean denoting the active option
		* `onChange` on an option can override the component `onChange`

### Events

* `onChange` is the dropdown callback handler
	* `e` is the click event
	* `o` is the selected option
		* `value` is the value of the option
* `onClick` is the link callback handler
	* `e` is the click event
	* `o` is the clicked path piece
		* `value` is the title of the path piece

### Notes

* You must set at least one option as `active`