diff --git a/src/components/Breadcrumbs/README.OLD.md b/src/components/Breadcrumbs/README.OLD.md
new file mode 100644
index 0000000000..84e7bdc179
--- /dev/null
+++ b/src/components/Breadcrumbs/README.OLD.md
@@ -0,0 +1,43 @@
+## Breadcrumbs
+
+Breadcrumbs component. Can collapse breadcrumbs that cause overflow.
+
+### PropTypes
+
+| Name | Type | Required | Default | Description |
+| :----------------------- | :--------- | :------: | :------ | :--------------------------------------------------------------------------------------------------------------------------- |
+| items | `Array` | ✓ | | Breadcrumb items array `BreadcrumbsItem[]` |
+| className | `String` | | | CSS class name of root element |
+| renderRootContent | `Function` | | | Custom render function of first item `(item: BreadcrumbsItem, isCurrent: boolean) => React.ReactNode;`) |
+| renderItemContent | `Function` | | | Custom render function of N+1 item `(item: BreadcrumbsItem, isCurrent: boolean, isPrevCurrent: boolean) => React.ReactNode;` |
+| renderItemDivider | `Function` | | | Custom render function of items separator `() => React.ReactNode;` |
+| lastDisplayedItemsCount | `Enum` | ✓ | | Number of items to display after items collapse control: `LastDisplayedItemsCount` |
+| firstDisplayedItemsCount | `Enum` | ✓ | | Number of items to display before items collapse control: `FirstDisplayedItemsCount` |
+| popupStyle | `String` | | | Style of collapsed items popup `staircase` |
+
+### Examples
+
+```jsx
+const breadcrumbs = [
+ {
+ title: 'What is love',
+ },
+ {
+ title: "Baby don't hurt me",
+ },
+ {
+ title: "Don't hurt me",
+ },
+ {
+ title: 'No more',
+ },
+];
+
+return (
+
+);
+```
diff --git a/src/components/Breadcrumbs/README.md b/src/components/Breadcrumbs/README.md
index 84e7bdc179..ee5fa8e160 100644
--- a/src/components/Breadcrumbs/README.md
+++ b/src/components/Breadcrumbs/README.md
@@ -1,43 +1,110 @@
-## Breadcrumbs
+
-Breadcrumbs component. Can collapse breadcrumbs that cause overflow.
+# Breadcrumbs
-### PropTypes
+
-| Name | Type | Required | Default | Description |
-| :----------------------- | :--------- | :------: | :------ | :--------------------------------------------------------------------------------------------------------------------------- |
-| items | `Array` | ✓ | | Breadcrumb items array `BreadcrumbsItem[]` |
-| className | `String` | | | CSS class name of root element |
-| renderRootContent | `Function` | | | Custom render function of first item `(item: BreadcrumbsItem, isCurrent: boolean) => React.ReactNode;`) |
-| renderItemContent | `Function` | | | Custom render function of N+1 item `(item: BreadcrumbsItem, isCurrent: boolean, isPrevCurrent: boolean) => React.ReactNode;` |
-| renderItemDivider | `Function` | | | Custom render function of items separator `() => React.ReactNode;` |
-| lastDisplayedItemsCount | `Enum` | ✓ | | Number of items to display after items collapse control: `LastDisplayedItemsCount` |
-| firstDisplayedItemsCount | `Enum` | ✓ | | Number of items to display before items collapse control: `FirstDisplayedItemsCount` |
-| popupStyle | `String` | | | Style of collapsed items popup `staircase` |
+```tsx
+import {Breadcrumbs} from '@gravity-ui/uikit';
+```
+
+`Breadcrumbs` can collapse breadcrumbs that cause overflow.
+
+## Appearance
+
+
-### Examples
+
```jsx
const breadcrumbs = [
{
- title: 'What is love',
+ text: 'Region',
},
{
- title: "Baby don't hurt me",
+ text: 'Country',
},
{
- title: "Don't hurt me",
+ text: 'City',
},
{
- title: 'No more',
+ text: 'District',
+ },
+ {
+ text: 'Street',
},
];
return (
);
```
+
+
+
+## Properties
+
+| Name | Description | Type | Default |
+| :----------------------- | :--------------------------------------------------------------------------------------------------------------------------- | :--------- | :------ |
+| items | Breadcrumb items array `BreadcrumbsItem[]` | `Array` | |
+| className | CSS class name of root element | `String` | |
+| renderRootContent | Custom render function of first item `(item: BreadcrumbsItem, isCurrent: boolean) => React.ReactNode;`) | `Function` | |
+| renderItemContent | Custom render function of N+1 item `(item: BreadcrumbsItem, isCurrent: boolean, isPrevCurrent: boolean) => React.ReactNode;` | `Function` | |
+| renderItemDivider | Custom render function of items separator `() => React.ReactNode;` | `Function` | |
+| firstDisplayedItemsCount | Number of items to display before items collapse control: `FirstDisplayedItemsCount` | `Enum` | |
+| lastDisplayedItemsCount | Number of items to display after items collapse control: `LastDisplayedItemsCount` | `Enum` | |
+| popupStyle | Style of collapsed items popup `staircase` | `String` | |