ant desgin 导航

import styles from './index.css';
import { Layout } from 'antd';
import { Menu } from 'antd';

const {
  Header, Footer, Content,
} = Layout;
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;


function BasicLayout(props) {
  return (
    <div className={styles.normal}>
    <Layout>
      <Header className={styles.munebox}>
      <Menu className={styles.mune} mode="horizontal">
       
      <SubMenu  title={<span className="submenu-title-wrapper">首页</span>}>
          <MenuItemGroup title="Item 1">
            {/* <Menu.Item key="setting:1">Option 1</Menu.Item>
            <Menu.Item key="setting:2">Option 2</Menu.Item> */}
          </MenuItemGroup>
          <MenuItemGroup title="Item 2">
            {/* <Menu.Item key="setting:3">Option 3</Menu.Item>
            <Menu.Item key="setting:4">Option 4</Menu.Item> */}
          </MenuItemGroup>
        </SubMenu>

        <SubMenu className={styles.muneitem} title={<span className="submenu-title-wrapper">性能</span>}>
          <MenuItemGroup title="Item 1">
            {/* <Menu.Item key="setting:1">Option 1</Menu.Item>
            <Menu.Item key="setting:2">Option 2</Menu.Item> */}
          </MenuItemGroup>
          <MenuItemGroup title="Item 2">
            {/* <Menu.Item key="setting:3">Option 3</Menu.Item>
            <Menu.Item key="setting:4">Option 4</Menu.Item> */}
          </MenuItemGroup>
        </SubMenu>
        <SubMenu className={styles.muneitem} title={<span className="submenu-title-wrapper">实例</span>}>
          <MenuItemGroup title="Item 1">
            {/* <Menu.Item key="setting:1">Option 1</Menu.Item> 
            <Menu.Item key="setting:2">Option 2</Menu.Item> */}
          </MenuItemGroup>
          <MenuItemGroup title="Item 2">
            {/* <Menu.Item key="setting:3">Option 3</Menu.Item>
            <Menu.Item key="setting:4">Option 4</Menu.Item> */}
          </MenuItemGroup>
        </SubMenu>
       
      </Menu>
      </Header>
      <Content>Content</Content>
      <Footer>Footer</Footer>
    </Layout>
    </div>
  );
}

export default BasicLayout;

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值