--- order: 2 title: zh-CN: 顶部-侧边布局 en-US: Header-Sider --- ## zh-CN 拥有顶部导航及侧边栏的页面,多用于展示类网站。 ## en-US Both the top navigation and the sidebar, commonly used in documentation site. ````jsx import { Layout, Menu, Breadcrumb, Icon } from 'antd'; const { SubMenu } = Menu; const { Header, Content, Footer, Sider } = Layout; ReactDOM.render( <Layout> <Header className="header"> <div className="logo" /> <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} style={{ lineHeight: '64px' }} > <Menu.Item key="1">nav 1</Menu.Item> <Menu.Item key="2">nav 2</Menu.Item> <Menu.Item key="3">nav 3</Menu.Item> </Menu> </Header> <Content style={{ padding: '0 50px' }}> <Breadcrumb style={{ margin: '12px 0' }}> <Breadcrumb.Item>Home</Breadcrumb.Item> <Breadcrumb.Item>List</Breadcrumb.Item> <Breadcrumb.Item>App</Breadcrumb.Item> </Breadcrumb> <Layout style={{ padding: '24px 0', background: '#fff' }}> <Sider width={200} style={{ background: '#fff' }}> <Menu mode="inline" defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} style={{ height: '100%' }} > <SubMenu key="sub1" title={<span><Icon type="user" />subnav 1</span>}> <Menu.Item key="1">option1</Menu.Item> <Menu.Item key="2">option2</Menu.Item> <Menu.Item key="3">option3</Menu.Item> <Menu.Item key="4">option4</Menu.Item> </SubMenu> <SubMenu key="sub2" title={<span><Icon type="laptop" />subnav 2</span>}> <Menu.Item key="5">option5</Menu.Item> <Menu.Item key="6">option6</Menu.Item> <Menu.Item key="7">option7</Menu.Item> <Menu.Item key="8">option8</Menu.Item> </SubMenu> <SubMenu key="sub3" title={<span><Icon type="notification" />subnav 3</span>}> <Menu.Item key="9">option9</Menu.Item> <Menu.Item key="10">option10</Menu.Item> <Menu.Item key="11">option11</Menu.Item> <Menu.Item key="12">option12</Menu.Item> </SubMenu> </Menu> </Sider> <Content style={{ padding: '0 24px', minHeight: 280 }}> Content </Content> </Layout> </Content> <Footer style={{ textAlign: 'center' }}> Ant Design ©2016 Created by Ant UED </Footer> </Layout> , mountNode); ```` ````css #components-layout-demo-top-side .logo { width: 120px; height: 31px; background: #333; border-radius: 6px; margin: 16px 28px 16px 0; float: left; } ````