--- order: 2 title: zh-CN: 顶部-侧边布局-通栏 en-US: Header Sider 2 --- ## zh-CN 同样拥有顶部导航及侧边栏,区别是两边未留边距,多用于应用型的网站。 ## en-US Both the top navigation and the sidebar, commonly used in application site. ```jsx import { Layout, Menu, Breadcrumb } from 'antd'; import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons'; const { SubMenu } = Menu; const { Header, Content, Sider } = Layout; ReactDOM.render(
nav 1 nav 2 nav 3
} title="subnav 1"> option1 option2 option3 option4 } title="subnav 2"> option5 option6 option7 option8 } title="subnav 3"> option9 option10 option11 option12 Home List App Content
, mountNode, ); ``` ```css #components-layout-demo-top-side-2 .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-2 .logo { float: right; margin: 16px 0 16px 24px; } .site-layout-background { background: #fff; } ```