import React from 'react'; import { HomeOutlined, UserOutlined } from '@ant-design/icons'; import { Breadcrumb, ConfigProvider } from 'antd'; const menuItems = [ { key: '1', label: ( <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/"> General </a> ), }, { key: '2', label: ( <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/"> Layout </a> ), }, { key: '3', label: ( <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/"> Navigation </a> ), }, ]; export default () => ( <ConfigProvider theme={{ components: { Breadcrumb: { itemColor: '#b02121', lastItemColor: '#0f3a88', iconFontSize: 28, linkColor: '#979a42', linkHoverColor: '#9450c0', separatorColor: '#b41b60', separatorMargin: 22, }, }, }} > <Breadcrumb separator=">" items={[ { title: 'Home', }, { title: <a href="">Application Center</a>, }, { title: <a href="">General</a>, menu: { items: menuItems }, }, { title: 'Application Center', href: '', }, { href: '', title: <HomeOutlined />, }, { href: '', title: ( <> <UserOutlined /> <span>Application List</span> </> ), }, ]} /> </ConfigProvider> );