--- 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(
nav 1 nav 2 nav 3
Home List App subnav 1}> option1 option2 option3 option4 subnav 2}> option5 option6 option7 option8 subnav 3}> option9 option10 option11 option12 Content
, mountNode); ```` ````css #components-layout-demo-top-side .logo { width: 120px; height: 31px; background: rgba(255,255,255,.2); margin: 16px 28px 16px 0; float: left; } ````