mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 06:03:38 +08:00
Code Issues Actions 29 Packages Projects Releases Wiki Activity

feat: Breadcrumb accessibility improvements (#34082)

Browse Source 
* add accessibility to the breadcrumb component

* feat: add accessibility to the breadcrumb component

* test: breadcrumb accessibility
This commit is contained in:
Uladzimir Atroshchanka 2022-03-10 07:46:42 +04:00 committed by GitHub
parent 895280971c
commit 662f3ade06
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 1898 additions and 1807 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/breadcrumb/Breadcrumb.tsx
View File

@ -143,9 +143,11 @@ const Breadcrumb: BreadcrumbInterface = ({
);
return (
<div className={breadcrumbClassName} style={style} {...restProps}>
{crumbs}
</div>
<nav className={breadcrumbClassName} style={style} {...restProps}>
<ol>
{crumbs}
</ol>
</nav>
);
};

10
components/breadcrumb/BreadcrumbItem.tsx
View File

@ -30,7 +30,7 @@ const BreadcrumbItem: BreadcrumbItemInterface = ({
const renderBreadcrumbNode = (breadcrumbItem: React.ReactNode) => {
if (overlay) {
return (
<DropDown overlay={overlay} placement="bottom" {...dropdownProps}>
<DropDown overlay={overlay} placement="bottomCenter" {...dropdownProps}>
<span className={`${prefixCls}-overlay-link`}>
{breadcrumbItem}
<DownOutlined />
@ -60,10 +60,12 @@ const BreadcrumbItem: BreadcrumbItemInterface = ({
link = renderBreadcrumbNode(link);
if (children) {
return (
<span>
<li>
{link}
{separator && <span className={`${prefixCls}-separator`}>{separator}</span>}
</span>
{separator && (
<span className={`${prefixCls}-separator`}>{separator}</span>
)}
</li>
);
}
return null;

2
components/breadcrumb/__tests__/Breadcrumb.test.js
View File

@ -3,10 +3,12 @@ import { mount, render } from 'enzyme';
import Breadcrumb from '../index';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import accessibilityTest from "../../../tests/shared/accessibilityTest";
describe('Breadcrumb', () => {
mountTest(Breadcrumb);
rtlTest(Breadcrumb);
accessibilityTest(Breadcrumb)
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});

544
components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap
View File

@ -1,307 +1,325 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Breadcrumb filter React.Fragment 1`] = `
<div
<nav
class="ant-breadcrumb"
>
<span>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Location
</span>
</li>
<span
class="ant-breadcrumb-link"
class="ant-breadcrumb-separator"
>
Location
:
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
:
</span>
<span>
<a
class="ant-breadcrumb-link"
href=""
<li>
<a
class="ant-breadcrumb-link"
href=""
>
Application Center
</a>
</li>
<span
class="ant-breadcrumb-separator"
>
Application Center
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</div>
/
</span>
</ol>
</nav>
`;
exports[`Breadcrumb rtl render component should be rendered correctly in RTL direction 1`] = `
<div
<nav
class="ant-breadcrumb ant-breadcrumb-rtl"
/>
>
<ol />
</nav>
`;
exports[`Breadcrumb should accept undefined routes 1`] = `
<div
<nav
class="ant-breadcrumb"
/>
>
<ol />
</nav>
`;
exports[`Breadcrumb should allow Breadcrumb.Item is null or undefined 1`] = `
<div
<nav
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
`;
exports[`Breadcrumb should not display Breadcrumb Item when its children is falsy 1`] = `
<div
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
xxx
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
yyy
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
`;
exports[`Breadcrumb should render a menu 1`] = `
<div
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index"
>
home
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-dropdown-trigger ant-breadcrumb-overlay-link"
>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first"
>
first
</a>
</span>
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first/second"
>
second
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<span />
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
`;
exports[`Breadcrumb should support Breadcrumb.Item default separator 1`] = `
<div
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
Location
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span>
<span
class="ant-breadcrumb-link"
>
Mock Node
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;
exports[`Breadcrumb should not display Breadcrumb Item when its children is falsy 1`] = `
<nav
class="ant-breadcrumb"
>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
xxx
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
yyy
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;
exports[`Breadcrumb should render a menu 1`] = `
<nav
class="ant-breadcrumb"
>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index"
>
home
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-dropdown-trigger ant-breadcrumb-overlay-link"
>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first"
>
first
</a>
</span>
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first/second"
>
second
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<span />
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;
exports[`Breadcrumb should support Breadcrumb.Item default separator 1`] = `
<nav
class="ant-breadcrumb"
>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Location
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<span>
<li>
<span
class="ant-breadcrumb-link"
>
Mock Node
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
Application Center
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<li>
<span
class="ant-breadcrumb-link"
>
Application Center
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;
exports[`Breadcrumb should support React.Fragment and falsy children 1`] = `
<div
<nav
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
yyy
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
yyy
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
yyy
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
0
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
yyy
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
yyy
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
yyy
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
0
</ol>
</nav>
`;
exports[`Breadcrumb should support custom attribute 1`] = `
<div
<nav
class="ant-breadcrumb"
data-custom="custom"
>
<span>
<span
class="ant-breadcrumb-link"
data-custom="custom-item"
>
xxx
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
yyy
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
data-custom="custom-item"
>
xxx
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
yyy
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;

932
components/breadcrumb/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

602
components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1,343 +1,353 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/breadcrumb/demo/basic.md correctly 1`] = `
<div
<nav
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href=""
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Application Center
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href=""
Home
</span>
<span
class="ant-breadcrumb-separator"
>
Application List
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
An Application
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
`;
exports[`renders ./components/breadcrumb/demo/overlay.md correctly 1`] = `
<div
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
Ant Design
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href=""
>
Component
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-dropdown-trigger ant-breadcrumb-overlay-link"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<a
href=""
>
General
Application Center
</a>
</span>
<span
aria-label="down"
class="anticon anticon-down"
role="img"
class="ant-breadcrumb-separator"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
/
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
Button
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<a
href=""
>
Application List
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
An Application
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;
exports[`renders ./components/breadcrumb/demo/overlay.md correctly 1`] = `
<nav
class="ant-breadcrumb"
>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Ant Design
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<a
href=""
>
Component
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-dropdown-trigger ant-breadcrumb-overlay-link"
>
<span
class="ant-breadcrumb-link"
>
<a
href=""
>
General
</a>
</span>
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
Button
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;
exports[`renders ./components/breadcrumb/demo/separator.md correctly 1`] = `
<div
<nav
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
&gt;
</span>
</span>
<span>
<a
class="ant-breadcrumb-link"
href=""
>
Application Center
</a>
<span
class="ant-breadcrumb-separator"
>
&gt;
</span>
</span>
<span>
<a
class="ant-breadcrumb-link"
href=""
>
Application List
</a>
<span
class="ant-breadcrumb-separator"
>
&gt;
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
An Application
</span>
<span
class="ant-breadcrumb-separator"
>
&gt;
</span>
</span>
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
&gt;
</span>
</li>
<li>
<a
class="ant-breadcrumb-link"
href=""
>
Application Center
</a>
<span
class="ant-breadcrumb-separator"
>
&gt;
</span>
</li>
<li>
<a
class="ant-breadcrumb-link"
href=""
>
Application List
</a>
<span
class="ant-breadcrumb-separator"
>
&gt;
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
An Application
</span>
<span
class="ant-breadcrumb-separator"
>
&gt;
</span>
</li>
</ol>
</nav>
`;
exports[`renders ./components/breadcrumb/demo/separator-component.md correctly 1`] = `
<div
<nav
class="ant-breadcrumb"
>
<span>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Location
</span>
</li>
<span
class="ant-breadcrumb-link"
class="ant-breadcrumb-separator"
>
Location
:
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
:
</span>
<span>
<a
class="ant-breadcrumb-link"
href=""
>
Application Center
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
<span>
<a
class="ant-breadcrumb-link"
href=""
>
Application List
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
<span>
<li>
<a
class="ant-breadcrumb-link"
href=""
>
Application Center
</a>
</li>
<span
class="ant-breadcrumb-link"
class="ant-breadcrumb-separator"
>
An Application
/
</span>
</span>
</div>
<li>
<a
class="ant-breadcrumb-link"
href=""
>
Application List
</a>
</li>
<span
class="ant-breadcrumb-separator"
>
/
</span>
<li>
<span
class="ant-breadcrumb-link"
>
An Application
</span>
</li>
</ol>
</nav>
`;
exports[`renders ./components/breadcrumb/demo/withIcon.md correctly 1`] = `
<div
<nav
class="ant-breadcrumb"
>
<span>
<a
class="ant-breadcrumb-link"
href=""
>
<span
aria-label="home"
class="anticon anticon-home"
role="img"
<ol>
<li>
<a
class="ant-breadcrumb-link"
href=""
>
<svg
aria-hidden="true"
data-icon="home"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<span
aria-label="home"
class="anticon anticon-home"
role="img"
>
<path
d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 00-44.4 0L77.5 505a63.9 63.9 0 00-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0018.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"
/>
</svg>
</span>
</a>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<a
class="ant-breadcrumb-link"
href=""
>
<svg
aria-hidden="true"
data-icon="home"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 00-44.4 0L77.5 505a63.9 63.9 0 00-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0018.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"
/>
</svg>
</span>
</a>
<span
aria-label="user"
class="anticon anticon-user"
role="img"
class="ant-breadcrumb-separator"
>
<svg
aria-hidden="true"
data-icon="user"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
/
</span>
</li>
<li>
<a
class="ant-breadcrumb-link"
href=""
>
<span
aria-label="user"
class="anticon anticon-user"
role="img"
>
<path
d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
/>
</svg>
<svg
aria-hidden="true"
data-icon="user"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
/>
</svg>
</span>
<span>
Application List
</span>
</a>
<span
class="ant-breadcrumb-separator"
>
/
</span>
<span>
Application List
</li>
<li>
<span
class="ant-breadcrumb-link"
>
Application
</span>
</a>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
Application
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;

166
components/breadcrumb/__tests__/__snapshots__/router.test.js.snap
View File

@ -74,91 +74,93 @@ exports[`react router react router 3 1`] = `
]
}
>
<div
<nav
className="ant-breadcrumb"
>
<BreadcrumbItem
key="Home"
separator="/"
>
<span>
<span
className="ant-breadcrumb-link"
>
<a
href="#/"
<ol>
<BreadcrumbItem
key="Home"
separator="/"
>
<li>
<span
className="ant-breadcrumb-link"
>
Home
</a>
</span>
<span
className="ant-breadcrumb-separator"
>
/
</span>
</span>
</BreadcrumbItem>
<BreadcrumbItem
key="apps"
separator="/"
>
<span>
<span
className="ant-breadcrumb-link"
>
<a
href="#/apps"
>
Application List
</a>
</span>
<span
className="ant-breadcrumb-separator"
>
/
</span>
</span>
</BreadcrumbItem>
<BreadcrumbItem
key="1"
separator="/"
>
<span>
<span
className="ant-breadcrumb-link"
>
<a
href="#/apps/1"
>
Application1
</a>
</span>
<span
className="ant-breadcrumb-separator"
>
/
</span>
</span>
</BreadcrumbItem>
<BreadcrumbItem
key="detail"
separator="/"
>
<span>
<span
className="ant-breadcrumb-link"
>
<span>
Detail
<a
href="#/"
>
Home
</a>
</span>
</span>
<span
className="ant-breadcrumb-separator"
>
/
</span>
</span>
</BreadcrumbItem>
</div>
<span
className="ant-breadcrumb-separator"
>
/
</span>
</li>
</BreadcrumbItem>
<BreadcrumbItem
key="apps"
separator="/"
>
<li>
<span
className="ant-breadcrumb-link"
>
<a
href="#/apps"
>
Application List
</a>
</span>
<span
className="ant-breadcrumb-separator"
>
/
</span>
</li>
</BreadcrumbItem>
<BreadcrumbItem
key="1"
separator="/"
>
<li>
<span
className="ant-breadcrumb-link"
>
<a
href="#/apps/1"
>
Application1
</a>
</span>
<span
className="ant-breadcrumb-separator"
>
/
</span>
</li>
</BreadcrumbItem>
<BreadcrumbItem
key="detail"
separator="/"
>
<li>
<span
className="ant-breadcrumb-link"
>
<span>
Detail
</span>
</span>
<span
className="ant-breadcrumb-separator"
>
/
</span>
</li>
</BreadcrumbItem>
</ol>
</nav>
</Breadcrumb>
`;

9
components/breadcrumb/style/index.less
View File

@ -13,6 +13,11 @@
font-size: @breadcrumb-icon-font-size;
}
ol {
display: flex;
flex-wrap: wrap;
}
a {
color: @breadcrumb-link-color;
transition: color 0.3s;
@ -22,7 +27,7 @@
}
}
& > span:last-child {
li:last-child {
color: @breadcrumb-last-item-color;
a {
@ -30,7 +35,7 @@
}
}
& > span:last-child &-separator {
li:last-child &-separator {
display: none;
}

324
components/config-provider/__tests__/__snapshots__/components.test.js.snap
View File

@ -985,189 +985,201 @@ exports[`ConfigProvider components Badge prefixCls 1`] = `
`;
exports[`ConfigProvider components Breadcrumb configProvider 1`] = `
<div
<nav
class="config-breadcrumb"
>
<span>
<span
class="config-breadcrumb-link"
>
Bamboo
</span>
<span
class="config-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="config-breadcrumb-link"
>
Light
</span>
<span
class="config-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="config-breadcrumb-link"
>
Bamboo
</span>
<span
class="config-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="config-breadcrumb-link"
>
Light
</span>
<span
class="config-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;
exports[`ConfigProvider components Breadcrumb configProvider componentSize large 1`] = `
<div
<nav
class="config-breadcrumb"
>
<span>
<span
class="config-breadcrumb-link"
>
Bamboo
</span>
<span
class="config-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="config-breadcrumb-link"
>
Light
</span>
<span
class="config-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="config-breadcrumb-link"
>
Bamboo
</span>
<span
class="config-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="config-breadcrumb-link"
>
Light
</span>
<span
class="config-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;
exports[`ConfigProvider components Breadcrumb configProvider componentSize middle 1`] = `
<div
<nav
class="config-breadcrumb"
>
<span>
<span
class="config-breadcrumb-link"
>
Bamboo
</span>
<span
class="config-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="config-breadcrumb-link"
>
Light
</span>
<span
class="config-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="config-breadcrumb-link"
>
Bamboo
</span>
<span
class="config-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="config-breadcrumb-link"
>
Light
</span>
<span
class="config-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;
exports[`ConfigProvider components Breadcrumb configProvider virtual and dropdownMatchSelectWidth 1`] = `
<div
<nav
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
Bamboo
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
Light
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Bamboo
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
Light
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;
exports[`ConfigProvider components Breadcrumb normal 1`] = `
<div
<nav
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
Bamboo
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
Light
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Bamboo
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
Light
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;
exports[`ConfigProvider components Breadcrumb prefixCls 1`] = `
<div
<nav
class="prefix-Breadcrumb"
>
<span>
<span
class="prefix-Breadcrumb-link"
>
Bamboo
</span>
<span
class="prefix-Breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="prefix-Breadcrumb-link"
>
Light
</span>
<span
class="prefix-Breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="prefix-Breadcrumb-link"
>
Bamboo
</span>
<span
class="prefix-Breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="prefix-Breadcrumb-link"
>
Light
</span>
<span
class="prefix-Breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;
exports[`ConfigProvider components Button configProvider 1`] = `

366
components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -658,47 +658,49 @@ exports[`renders ./components/layout/demo/fixed.md extend context correctly 1`]
class="ant-layout-content site-layout"
style="padding:0 50px;margin-top:64px"
>
<div
<nav
class="ant-breadcrumb"
style="margin:16px 0"
>
<span>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<div
class="site-layout-background"
style="padding:24px;min-height:380px"
@ -2497,35 +2499,37 @@ exports[`renders ./components/layout/demo/side.md extend context correctly 1`] =
class="ant-layout-content"
style="margin:0 16px"
>
<div
<nav
class="ant-breadcrumb"
style="margin:16px 0"
>
<span>
<span
class="ant-breadcrumb-link"
>
User
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
Bill
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
User
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
Bill
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<div
class="site-layout-background"
style="padding:24px;min-height:360px"
@ -3458,47 +3462,49 @@ exports[`renders ./components/layout/demo/top.md extend context correctly 1`] =
class="ant-layout-content"
style="padding:0 50px"
>
<div
<nav
class="ant-breadcrumb"
style="margin:16px 0"
>
<span>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<div
class="site-layout-content"
>
@ -3757,47 +3763,49 @@ exports[`renders ./components/layout/demo/top-side.md extend context correctly 1
class="ant-layout-content"
style="padding:0 50px"
>
<div
<nav
class="ant-breadcrumb"
style="margin:16px 0"
>
<span>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<section
class="ant-layout site-layout-background"
style="padding:24px 0"
@ -6053,47 +6061,49 @@ exports[`renders ./components/layout/demo/top-side-2.md extend context correctly
class="ant-layout"
style="padding:0 24px 24px"
>
<div
<nav
class="ant-breadcrumb"
style="margin:16px 0"
>
<span>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<main
class="ant-layout-content site-layout-background"
style="padding:24px;margin:0;min-height:280px"

366
components/layout/__tests__/__snapshots__/demo.test.js.snap
View File

@ -381,47 +381,49 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
class="ant-layout-content site-layout"
style="padding:0 50px;margin-top:64px"
>
<div
<nav
class="ant-breadcrumb"
style="margin:16px 0"
>
<span>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<div
class="site-layout-background"
style="padding:24px;min-height:380px"
@ -1253,35 +1255,37 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
class="ant-layout-content"
style="margin:0 16px"
>
<div
<nav
class="ant-breadcrumb"
style="margin:16px 0"
>
<span>
<span
class="ant-breadcrumb-link"
>
User
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
Bill
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
User
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
Bill
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<div
class="site-layout-background"
style="padding:24px;min-height:360px"
@ -1542,47 +1546,49 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
class="ant-layout-content"
style="padding:0 50px"
>
<div
<nav
class="ant-breadcrumb"
style="margin:16px 0"
>
<span>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<div
class="site-layout-content"
>
@ -1697,47 +1703,49 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
class="ant-layout-content"
style="padding:0 50px"
>
<div
<nav
class="ant-breadcrumb"
style="margin:16px 0"
>
<span>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<section
class="ant-layout site-layout-background"
style="padding:24px 0"
@ -2255,47 +2263,49 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
class="ant-layout"
style="padding:0 24px 24px"
>
<div
<nav
class="ant-breadcrumb"
style="margin:16px 0"
>
<span>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<main
class="ant-layout-content site-layout-background"
style="padding:24px;margin:0;min-height:280px"

188
components/page-header/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -455,56 +455,58 @@ exports[`renders ./components/page-header/demo/breadcrumb.md extend context corr
<div
class="ant-page-header site-page-header has-breadcrumb ant-page-header-ghost"
>
<div
<nav
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index"
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
First-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first"
>
Second-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<span>
Third-level Menu
<a
href="#/index"
>
First-level Menu
</a>
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first"
>
Second-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<span>
Third-level Menu
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<div
class="ant-page-header-heading"
>
@ -532,56 +534,58 @@ exports[`renders ./components/page-header/demo/content.md extend context correct
<div
class="ant-page-header site-page-header has-breadcrumb ant-page-header-ghost"
>
<div
<nav
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index"
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
First-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first"
>
Second-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<span>
Third-level Menu
<a
href="#/index"
>
First-level Menu
</a>
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first"
>
Second-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<span>
Third-level Menu
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<div
class="ant-page-header-heading"
>

188
components/page-header/__tests__/__snapshots__/demo.test.js.snap
View File

@ -455,56 +455,58 @@ exports[`renders ./components/page-header/demo/breadcrumb.md correctly 1`] = `
<div
class="ant-page-header site-page-header has-breadcrumb ant-page-header-ghost"
>
<div
<nav
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index"
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
First-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first"
>
Second-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<span>
Third-level Menu
<a
href="#/index"
>
First-level Menu
</a>
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first"
>
Second-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<span>
Third-level Menu
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<div
class="ant-page-header-heading"
>
@ -532,56 +534,58 @@ exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
<div
class="ant-page-header site-page-header has-breadcrumb ant-page-header-ghost"
>
<div
<nav
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index"
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
First-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first"
>
Second-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<span>
Third-level Menu
<a
href="#/index"
>
First-level Menu
</a>
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first"
>
Second-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<span>
Third-level Menu
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<div
class="ant-page-header-heading"
>