Navigation Breadcrumb

Introduction

Breadcrumbs are a secondary navigation aid that helps users easily understand the relation between their location on a page

Example in legacy UI :

Default

home

<Breadcrumb nav={[{ label: 'home', href: '/' }]} />

Long breadcrumbs

home

home5

<Breadcrumb
  nav={[
    { label: 'home', href: '/' },
    { label: 'home1', href: '/' },
    { label: 'home2', href: '/' },
    { label: 'home3', href: '/' },
    { label: 'home4', href: '/' },
    { label: 'home5', href: '/' },
  ]}
/>

Long breadcrumbs but expanded

home

home5

<Breadcrumb
  isExpanded={true}
  nav={[
    { label: 'home', href: '/' },
    { label: 'home1', href: '/' },
    { label: 'home2', href: '/' },
    { label: 'home3', href: '/' },
    { label: 'home4', href: '/' },
    { label: 'home5', href: '/' },
  ]}
/>

Icons

Automated tests

Unit

Command : npm run test: unit
Test file location : /tests/unit/breadcrumb.unit.test.tsx

 npm run test:unit:file breadcrumb

Integration

Command : ???
Test file location : /tests ???

npm run test:integration -p breadcrumb

Tour Second Page Copy to Paste