--- order: 1 title: 顶部导航 + 侧边栏 --- 顶级导航在头部,次级导航在侧边栏。 ````__react import { Menu, Breadcrumb, Icon } from 'antd'; import BrowserDemo from 'site/theme/template/BrowserDemo'; const SubMenu = Menu.SubMenu; ReactDOM.render(
导航一 导航二 导航三
二级导航 二级导航 二级导航
首页 应用列表 某应用
内容区域
Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
, mountNode); ```` ````css .layout-topaside { height: 100%; } .layout-topaside .layout-wrapper { padding: 0 50px; } .layout-topaside .layout-header { background: #404040; height: 64px; } .layout-topaside .layout-logo { width: 120px; height: 32px; background: #333; border-radius: 4px; margin: 16px 24px 16px 0; float: left; } .layout-topaside .layout-subheader { height: 48px; border-bottom: 1px solid #e9e9e9; background: #fff; margin-bottom: 12px; } .layout-topaside .layout-container { background: #fff; margin: 12px 0 0; position: relative; padding: 24px 0; overflow: hidden; border-radius: 4px; } .layout-topaside .layout-sider { width: 224px; float: left; } .layout-topaside .layout-content { border-left: 1px solid #e9e9e9; padding: 0 24px; overflow: auto; position: relative; left: -1px; } .layout-topaside .layout-footer { height: 64px; line-height: 64px; text-align: center; font-size: 12px; color: #999; } ````