ant-design/spec/layout/demo/aside.md

侧边导航

• order: 2

顶级导航在侧边栏。

---

import { Menu, Breadcrumb, Icon } from 'antd';
const SubMenu = Menu.SubMenu;

ReactDOM.render(
  <BrowserDemo>
    <div className="ant-layout-aside">
      <aside className="ant-layout-sider">
        <div className="ant-layout-logo"></div>
        <Menu mode="inline" theme="dark"
          defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']}>
          <SubMenu key="sub1" title={<span><Icon type="user" />导航一</span>}>
            <Menu.Item key="1">选项1</Menu.Item>
            <Menu.Item key="2">选项2</Menu.Item>
            <Menu.Item key="3">选项3</Menu.Item>
            <Menu.Item key="4">选项4</Menu.Item>
          </SubMenu>
          <SubMenu key="sub2" title={<span><Icon type="laptop" />导航二</span>}>
            <Menu.Item key="5">选项5</Menu.Item>
            <Menu.Item key="6">选项6</Menu.Item>
            <Menu.Item key="7">选项7</Menu.Item>
            <Menu.Item key="8">选项8</Menu.Item>
          </SubMenu>
          <SubMenu key="sub3" title={<span><Icon type="notification" />导航三</span>}>
            <Menu.Item key="9">选项9</Menu.Item>
            <Menu.Item key="10">选项10</Menu.Item>
            <Menu.Item key="11">选项11</Menu.Item>
            <Menu.Item key="12">选项12</Menu.Item>
          </SubMenu>
        </Menu>
      </aside>
      <div className="ant-layout-main">
        <div className="ant-layout-header"></div>
        <div className="ant-layout-breadcrumb">
          <Breadcrumb>
            <Breadcrumb.Item>首页</Breadcrumb.Item>
            <Breadcrumb.Item>应用列表</Breadcrumb.Item>
            <Breadcrumb.Item>某应用</Breadcrumb.Item>
          </Breadcrumb>
        </div>
        <div className="ant-layout-container">
          <div className="ant-layout-content">
            <div style={{ height: 590 }}></div>
          </div>
        </div>
      </div>
    </div>
  </BrowserDemo>
, document.getElementById('spec-layout-demo-aside'));

.ant-layout-aside {
  position: relative;
  min-height: 100%;
  overflow: hidden;
}

.ant-layout-aside .ant-layout-logo {
  width: 150px;
  height: 32px;
  background: #333;
  border-radius: 6px;
  margin: 16px 24px 16px 28px;
}

.ant-layout-aside .ant-layout-sider {
  width: 224px;
  background: #404040;
  position: absolute;
  padding-bottom: 24px;
  min-height: 100%;
}

.ant-layout-aside .ant-layout-sider > .ant-menu {
  margin-bottom: 20px;
}

.ant-layout-aside .ant-layout-header {
  background: #fff;
  height: 64px;
  border-bottom: 1px solid #e9e9e9;
}

.ant-layout-aside .ant-layout-breadcrumb {
  margin: 7px 0 -17px 24px;
}

.ant-layout-aside .ant-layout-main {
  margin-left: 224px;
  margin-bottom: 24px;
}

.ant-layout-aside .ant-layout-container {
  margin: 24px 16px;
}

.ant-layout-aside .ant-layout-content {
  background: #fff;
  padding: 24px;
}