import { Meta } from '@storybook/addon-docs';
import Link from '@cloudscape-design/components/link';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';

<Meta title="Migration/BreadcrumbGroup" />

# Migrating from NorthStar legacy - BreadcrumbGroup

Use <Link href='https://cloudscape.design/components/breadcrumb-group' target='_blank' external>Cloudscape BreadcrumbGroup component</Link>

## Limitations

<Link href='https://cloudscape.design/components/breadcrumb-group' target='_blank' external>Cloudscape BreadcrumbGroup component</Link> {' '}
does not support automatic generation of breadcrumb group based on the current route. However, if you are using NorthStar v2 AppLayout component 
without specifying a specific breadcrumbGroup prop, the breadcrumb group will be generated automatically based on the current route. 

## Update Import

```diff
- import BreadcrumbGroup from 'aws-northstar/components/BreadcrumbGroup';
+ import BreadcrumbGroup from '@cloudscape-design/components/breadcrumb-group';
```

export const Component = () => {
  return <SyntaxHighlighter/>;
};