--- order: 7 iframe: 360 title: zh-CN: 固定侧边栏 en-US: Fixed Sider --- ## zh-CN 当内容较长时,使用固定侧边栏可以提供更好的体验。 ## en-US When dealing with long content, a fixed sider can provide a better user experience. ```jsx import { Layout, Menu } from 'antd'; import { AppstoreOutlined, BarChartOutlined, CloudOutlined, ShopOutlined, TeamOutlined, UserOutlined, UploadOutlined, VideoCameraOutlined, } from '@ant-design/icons'; const { Header, Content, Footer, Sider } = Layout; ReactDOM.render( }> nav 1 }> nav 2 }> nav 3 }> nav 4 }> nav 5 }> nav 6 }> nav 7 }> nav 8 ... Really ... ... ... long ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... content , mountNode, ); ``` ```css #components-layout-demo-fixed-sider .logo { height: 32px; background: rgba(255, 255, 255, 0.2); margin: 16px; } .site-layout .site-layout-background { background: #fff; } ```