Breadcrumbs

Breadcrumb navigation helps the user to understand their location in the website by providing a breadcrumb trail back to the start page.

Installyarn add @diallink-corp/convergo-react-breadcrumbs
Version4.1.2
Usageimport {Breadcrumbs} from '@diallink-corp/convergo-react-breadcrumbs'

Example

<Breadcrumbs>
  <Item key="home">Settings</Item>
  <Item key="phoneNumbers">Phone Numbers</Item>
  <Item key="mainNumber">Main Number</Item>
</Breadcrumbs>
<Breadcrumbs>
  <Item key="home">Settings</Item>
  <Item key="phoneNumbers">Phone Numbers</Item>
  <Item key="mainNumber">Main Number</Item>
</Breadcrumbs>
<Breadcrumbs>
  <Item key="home">
    Settings
  </Item>
  <Item key="phoneNumbers">
    Phone Numbers
  </Item>
  <Item key="mainNumber">
    Main Number
  </Item>
</Breadcrumbs>

Sizes

The breadcrumbs come in three different sizes: small, medium and large.

<Breadcrumbs size='small'>
  <Item key="home">Settings</Item>
  <Item key="phoneNumbers">Phone Numbers</Item>
  <Item key="mainNumber">Main Number</Item>
</Breadcrumbs>
<Breadcrumbs size='small'>
  <Item key="home">Settings</Item>
  <Item key="phoneNumbers">Phone Numbers</Item>
  <Item key="mainNumber">Main Number</Item>
</Breadcrumbs>
<Breadcrumbs size="small">
  <Item key="home">
    Settings
  </Item>
  <Item key="phoneNumbers">
    Phone Numbers
  </Item>
  <Item key="mainNumber">
    Main Number
  </Item>
</Breadcrumbs>
<Breadcrumbs size='medium'>
  <Item key="home">Settings</Item>
  <Item key="phoneNumbers">Phone Numbers</Item>
  <Item key="mainNumber">Main Number</Item>
</Breadcrumbs>
<Breadcrumbs size='medium'>
  <Item key="home">Settings</Item>
  <Item key="phoneNumbers">Phone Numbers</Item>
  <Item key="mainNumber">Main Number</Item>
</Breadcrumbs>
<Breadcrumbs size="medium">
  <Item key="home">
    Settings
  </Item>
  <Item key="phoneNumbers">
    Phone Numbers
  </Item>
  <Item key="mainNumber">
    Main Number
  </Item>
</Breadcrumbs>
<Breadcrumbs size='large'>
  <Item key="home">Settings</Item>
  <Item key="phoneNumbers">Phone Numbers</Item>
  <Item key="mainNumber">Main Number</Item>
</Breadcrumbs>
<Breadcrumbs size='large'>
  <Item key="home">Settings</Item>
  <Item key="phoneNumbers">Phone Numbers</Item>
  <Item key="mainNumber">Main Number</Item>
</Breadcrumbs>
<Breadcrumbs size="large">
  <Item key="home">
    Settings
  </Item>
  <Item key="phoneNumbers">
    Phone Numbers
  </Item>
  <Item key="mainNumber">
    Main Number
  </Item>
</Breadcrumbs>

Disabled

The breadcrumbs can be disabled to prevent navigation.

<Breadcrumbs isDisabled>
  <Item key="home">Settings</Item>
  <Item key="phoneNumbers">Phone Numbers</Item>
  <Item key="mainNumber">Main Number</Item>
</Breadcrumbs>
<Breadcrumbs isDisabled>
  <Item key="home">Settings</Item>
  <Item key="phoneNumbers">Phone Numbers</Item>
  <Item key="mainNumber">Main Number</Item>
</Breadcrumbs>
<Breadcrumbs
  isDisabled
>
  <Item key="home">
    Settings
  </Item>
  <Item key="phoneNumbers">
    Phone Numbers
  </Item>
  <Item key="mainNumber">
    Main Number
  </Item>
</Breadcrumbs>

Visible Items

When there are too many items to fit on the screen we automatically wrap the result into a menu component.

<Breadcrumbs>
  <Item key="test1">Test 1</Item>
  <Item key="test2">Test 2</Item>
  <Item key="test3">Test 3</Item>
  <Item key="test4">Test 4</Item>
  <Item key="test5">Test 5</Item>
  <Item key="test6">Test 6</Item>
  <Item key="test7">Test 7</Item>
  <Item key="test8">Test 8</Item>
  <Item key="test9">Test 9</Item>
  <Item key="test10">Test 10</Item>
  <Item key="test11">Test 11</Item>
</Breadcrumbs>
<Breadcrumbs>
  <Item key="test1">Test 1</Item>
  <Item key="test2">Test 2</Item>
  <Item key="test3">Test 3</Item>
  <Item key="test4">Test 4</Item>
  <Item key="test5">Test 5</Item>
  <Item key="test6">Test 6</Item>
  <Item key="test7">Test 7</Item>
  <Item key="test8">Test 8</Item>
  <Item key="test9">Test 9</Item>
  <Item key="test10">Test 10</Item>
  <Item key="test11">Test 11</Item>
</Breadcrumbs>
<Breadcrumbs>
  <Item key="test1">
    Test 1
  </Item>
  <Item key="test2">
    Test 2
  </Item>
  <Item key="test3">
    Test 3
  </Item>
  <Item key="test4">
    Test 4
  </Item>
  <Item key="test5">
    Test 5
  </Item>
  <Item key="test6">
    Test 6
  </Item>
  <Item key="test7">
    Test 7
  </Item>
  <Item key="test8">
    Test 8
  </Item>
  <Item key="test9">
    Test 9
  </Item>
  <Item key="test10">
    Test 10
  </Item>
  <Item key="test11">
    Test 11
  </Item>
</Breadcrumbs>

API