--- 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. ```tsx import { Layout, Menu, Breadcrumb, MenuProps } from 'antd'; import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons'; const { Header, Content, Footer, Sider } = Layout; const items1: MenuProps['items'] = ['1', '2', '3'].map(key => ({ key, label: `nav ${key}`, })); const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOutlined].map( (icon, index) => { const key = String(index + 1); return { key: `sub${key}`, icon: React.createElement(icon), label: `subnav ${key}`, children: new Array(4).fill(null).map((_, j) => { const subKey = index * 4 + j + 1; return { key: subKey, label: `option${subKey}`, }; }), }; }, ); export default () => (
Home List App Content ); ``` ```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; } #components-layout-demo-top-side .site-layout-background { background: #fff; } ```