React+Fluent UI导航栏自定义：如何实现带顶部头部与底部图标的左侧侧边栏

我来帮你搞定这个问题！Fluent UI的Nav组件本身确实没有直接提供头部和底部的插槽，但我们可以通过自定义容器布局来实现你想要的侧边栏结构——顶部头部、中间导航项、底部图标。下面是具体的解决方案：

核心思路 #

我们需要把Nav组件包裹在一个垂直布局的容器中，然后在容器的顶部和底部添加自定义内容，利用CSS Flexbox让中间的Nav自动填充剩余空间，同时保持顶部和底部固定在侧边栏的两端。

修改后的完整代码 #

import React from 'react';
import { Nav, initializeIcons, Stack, Icon } from '@fluentui/react';

// 全局初始化图标，避免组件每次渲染都重复调用
initializeIcons();

const navigationStyles = {
  root: {
    width: 50,
    // 去掉固定height，让flex布局控制高度
    boxSizing: 'border-box',
    border: '1px solid #eee',
    overflowY: 'auto',
    // 让Nav占满中间剩余空间
    flex: 1,
  },
};

// 侧边栏容器样式
const sidebarStyles = {
  root: {
    width: 50,
    height: '100vh',
    boxSizing: 'border-box',
    border: '1px solid #eee',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    padding: '12px 0',
  },
};

// 顶部头部/底部图标的通用样式
const iconWrapperStyles = {
  root: {
    padding: '8px',
    cursor: 'pointer',
    marginBottom: '16px', // 头部和Nav之间的间距
    '&:hover': {
      backgroundColor: '#f3f2f1',
      borderRadius: '4px',
    },
  },
};

const bottomIconWrapperStyles = {
  ...iconWrapperStyles.root,
  marginBottom: 0,
  marginTop: 'auto', // 把底部图标推到侧边栏底部
};

const links = [
  {
    links: [
      {
        name: 'Calls',
        key:'key1',
        url: '/',
        iconProps: {
          iconName: 'Phone',
          styles: {
            root: {
              fontSize: 20,
              color: '#106ebe',
            }
          }
        }
      },
      {
        name: 'Contacts',
        key: 'key2',
        url: '/',
        iconProps: {
          iconName: 'AddFriend',
          styles: {
            root: {
              fontSize: 20,
              color: '#106ebe',
            }
          }
        }
      },
      {
        name: 'Chats',
        key: 'key3',
        url: '/',
        iconProps: {
          iconName: 'OfficeChat',
          styles: {
            root: {
              fontSize: 20,
              color: '#106ebe',
            }
          }
        }
      },
      {
        name: 'Notification',
        key:'key4',
        url: '/',
        iconProps: {
          iconName: 'Ringer',
          styles: {
            root: {
              fontSize: 20,
              color: '#106ebe',
            }
          }
        }
      },
      {
        name: 'Stats',
        key: 'key5',
        url: '/',
        iconProps: {
          iconName: 'AddOnlineMeeting',
          styles: {
            root: {
              fontSize: 20,
              color: '#106ebe',
            }
          }
        }
      },
    ],
  },
];

const Navigation = () => {
  return (
    <Stack styles={sidebarStyles}>
      {/* 顶部头部图标/Logo */}
      <Icon
        iconName="GlobalNavButton"
        styles={{ root: { fontSize: 24, color: '#106ebe' } }}
        wrapperProps={{ styles: iconWrapperStyles }}
      />

      {/* 中间导航区域 */}
      <Nav groups={links} selectedKey='key1' styles={navigationStyles} />

      {/* 底部图标 */}
      <Icon
        iconName="Settings"
        styles={{ root: { fontSize: 20, color: '#106ebe' } }}
        wrapperProps={{ styles: bottomIconWrapperStyles }}
      />
      <Icon
        iconName="SignOut"
        styles={{ root: { fontSize: 20, color: '#106ebe' } }}
        wrapperProps={{ styles: iconWrapperStyles }}
      />
    </Stack>
  );
};

export default Navigation;

关键改动说明 #

• 全局初始化图标：把initializeIcons()移到组件外部，避免每次组件渲染都重复执行初始化操作。
• 侧边栏容器布局：用Stack组件创建垂直flex布局容器，设置height: 100vh占满视口高度，alignItems: center让内容居中对齐。
• 中间Nav组件：修改navigationStyles.root，去掉固定height，添加flex: 1让Nav自动填充顶部和底部之间的剩余空间，同时保留滚动功能。
• 顶部头部内容：在Nav上方添加自定义图标（或Logo），通过marginBottom设置和Nav的间距，提升布局层次感。
• 底部图标区域：利用marginTop: 'auto'把底部图标推到侧边栏的最底部，实现固定在底部的效果。
• 交互样式优化：给头部和底部图标添加hover背景色，提升用户交互体验。

这样修改后，你就能得到一个包含顶部头部、中间导航、底部图标的完整侧边栏布局了，完全符合你的需求！

内容的提问来源于stack exchange，提问作者Pratik Patel