Microsoft Fluent UI React v9 を使ってメニューバーを実装する

こんにちは。やまゆです。

Microsoft が最近の様々なアプリケーションで採用している Fluent UI というものがあります。

https://fluent2.microsoft.design/

Figma, React, ネイティブ向け実装などが用意されていて、簡単にリッチな見た目を実装することが可能です。

Fluent UI に関する記事がとても少なかったので、細かく紹介してみようと思いました。

今回は React 実装の最新版である v9 を使って、アプリケーションによくあるメニューバーを実装してみます。

React Component は v8(成熟した実用例が多いバージョン) と v9(最新のバージョン) の二種類が用意されています。公式では v9 を使うことが推奨されているので、こちらを利用します。

ドキュメントは下記です。

https://react.fluentui.dev/

メニューバーは ToolBar と Menu を組み合わせて実装することが出来ます。

Menu は複数階層構造にすることが可能です。

    <Toolbar aria-label="nav">
      <Menu>
        <MenuTrigger>
          <ToolbarButton aria-label="Create">A</ToolbarButton>
        </MenuTrigger>

        <MenuPopover>
          <MenuList>
            <Menu>
              <MenuTrigger disableButtonEnhancement={true}>
                <MenuItem>A-B</MenuItem>
              </MenuTrigger>
              <MenuPopover>
                <MenuList>
                  <MenuItem>A-B-C</MenuItem>
                  <MenuItem>A-B-D</MenuItem>
                  <Menu>
                    <MenuTrigger disableButtonEnhancement={true}>
                      <MenuItem>A-B-E</MenuItem>
                    </MenuTrigger>
                    <MenuPopover>
                      <MenuList>
                        <MenuItem>A-B-E-F</MenuItem>
                      </MenuList>
                    </MenuPopover>
                  </Menu>
                  <Menu>
                    <MenuTrigger disableButtonEnhancement={true}>
                      <MenuItem>A-B-G</MenuItem>
                    </MenuTrigger>
                    <MenuPopover>
                      <MenuList>
                        <MenuItem>A-B-G-H</MenuItem>
                      </MenuList>
                    </MenuPopover>
                  </Menu>
                </MenuList>
              </MenuPopover>
            </Menu>
          </MenuList>
        </MenuPopover>
      </Menu>
    </Toolbar>

各 MenuItem で onClick イベントをフックして実際の操作を実行させるようにすれば簡単にメニューバーを実装することが出来ます。