--- 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 } from 'antd'; import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons'; const { SubMenu } = Menu; const { Header, Content, Footer, Sider } = Layout; ReactDOM.render(
nav 1 nav 2 nav 3
Home List App } title="subnav 1"> option1 option2 option3 option4 } title="subnav 2"> option5 option6 option7 option8 } title="subnav 3"> option9 option10 option11 option12 Content
, mountNode, ); ``` ```css #components-layout-demo-top-side .logo { float: left; width: 120px; height: 31px; margin: 16px 24px 16px 0; background: rgba(255, 255, 255, 0.3); } .ant-row-rtl #components-layout-demo-top-side .logo { float: right; margin: 16px 0 16px 24px; } .site-layout-background { background: #fff; } ```